Update Layout component

[flacoman91]

Summary of changes

Layout behavior (CSS) — src/components/Layout/layout.scss

• 2-1 divider: The peer DS only outputs right: -1.875em on .content--2-1 .content__main::after, so the vertical rule never renders. We add the full ::after rule (mirroring 1-3, with border-right and position: relative on main).
• Divider height: DS uses inline-block columns, so .content__main is only as tall as its content and the ::after line stops there. We make .content--1-3 .wrapper / .content--2-1 .wrapper a flex row with align-items: stretch, reset children to display: block and margin-right: 0, and set flex / max-width so the 25/75 and 66.67/33.33 splits stay aligned with the DS.
• Overflow workaround (existing / retained): From 37.5625em, margin-right: 0 !important on .content--2-1 .content__main and .content--1-3 .content__sidebar (comment in file says this fixes content overflowing the sidebar).

Storybook — examples match CFPB markup and Controls behavior

• Updated examples to display content with different heights to show the variable divider heights
• layout-main.stories.tsx: Shared renderMainLayout() so layout in Controls reorders Sidebar vs Content (1-3 → sidebar first; 2-1 → main first). Docs note about DOM order.
• layout-wrapper.stories.tsx: Children order Content then Sidebar to match default 2-1.
• layout-content.stories.tsx, layout-sidebar.stories.tsx: Same 2-1 order and explicit layout='2-1' on Layout.Main.

TODO:

• remove overrides and fixes for the divider in 2-1 layout if it is fixed in DS upstream

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-04-29 14:57 UTC

[flacoman91]

closing. this is going to merge in with #560 to make it easier to preview changes on Complaint Explorer