573 - Multi viewport viewer addon

[flacoman91]

Addresses- ??

Fixed the font rendering in the preview as well

I installed storybook-font-inspector so you can use the tool to inspect the fonts in a single preview

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-05-13 19:10 UTC

[natalia-fitzgerald]

@flacoman91

I took a look at all components to see how the "All viewports" is working across the board. Here's an itemized review of what I found, including suggested changes. For anything that is out of scope for this PR I can create separate tickets.

Multi viewport bugs

• Focus state and interactive state borders getting cut off for perhaps all components that have states
• Container for the tablet version of the Header component
• The image in the DSR implementation of the 50/50 hero is not rendering correctly. In this hero the image should take up 50% of the hero space. You can view the implemented component here: https://www.consumerfinance.gov/es/

Checkbox

At "All viewports" focus state is getting cut off.

Large target area

At "All viewports" focus state is getting cut off.

Expandables

At "All viewports" focus state is getting cut off.

Alert

In the field-level alerts for "All viewports" the input field border and focus state are getting cut off.

Breadcrumb

For the breadcrumb at mobile, should we have 15px padding left and right? See image from CE staging:

Fieldset

At "All viewports" focus state is getting cut off.

Header
At "All viewports" there is extra space between tablet and phone.

Layout

I'm not sure how to interpret the "All viewports" view for this one.

Select

In "All viewports" the input field border and focus state are getting cut off. This is happening for both single and multi selects.

Hero related

50/50 hero

The image in the DSR implementation of the 50/50 hero is not rendering correctly. In this hero the image should take up 50% of the hero space. You can view the implemented component here: https://www.consumerfinance.gov/es/

Screenshots

cf.gov/DS	DSR implentation

Pre-existing issues

Text fixes (easy fixes)

• I created this ticket for the text fixes: Easy text fixes to Alert and Full-width button examples #579

Full-width button

Change button label to "Full-width" instead of "Resize to mobile to see effect"

Alert

• In the sample component text, match the wording and casing shown in the CFPB Design System.
• In component text, change "A Notification" to "Information alert"
• Remove period from "No results found" and "Page not found"
• Remove "Link to more info" from field-level alerts
• Change casing of placeholder text to "Input text"

Match the text shown here:

Code fixes (higher level of effort)

Icons

Icons next to headings are sitting low. I have to look into whether this is a known issue that's on the radar at the DS level. It could be related to the typeface change.

Eyebrow

• I believe this problem originates at the DS level. The DSR eyebrow at mobile does not match the cf.gov implementation. It looks like this issue originates at the DS level so I will have to post a bug ticket there.
• Created a CFPB Design System ticket for this: Bug: Mobile Eyebrow does not match design intent, as implemented in cf.gov design-system#2671

https://www.consumerfinance.gov/owning-a-home/prepare/

Screenshots

DS component	DSR implementation

Slug

• I believe this problem originates at the DSR level. This component does not match the CFPB DS component. I can create a separate bug ticket for this.
• Created a separate issue for this: Bug: Slug component in DSR does not match the DS component #578

Hero

For the majority of CFPB components, we go down the the next heading level at 600px width and below. For the Hero component, however, the type styling breaks to the next level at 900px wide. This creates a conflict in visual hierarchy between the 900px and 601px width, where you will see the hero heading and the first heading in the main content area styled with the Heading 2 styling.

• I created a DS ticket for this bug: Bug: Responsive behavior for hero does not align with that of other components design-system#2674

• DSR: https://cfpb.github.io/design-system-react/?path=/story/components-verified-headings--slug&globals=viewport.isRotated:!false

• DS: https://cfpb.github.io/design-system/foundation/headings#slug-heading

Screenshots

DS component	DSR implentation

[natalia-fitzgerald]

@flacoman91
Great work on this! It looks good.

I created separate tickets for all items posted here that were not directly related to the multi-viewport addon #574 (comment)