fix(preview): wrap the showcase nav so it fits a 320px phone

[jlc488]

Problem

preview/icons.html scrolls sideways at a 320px viewport: document.documentElement.scrollWidth is 336. The overflowing elements are the header nav and its last link (right edge 336px). This predates #69.

Root cause

The nav is a display: flex row with the default flex-wrap: nowrap. At phone widths each link shrinks to its narrowest unbreakable word (foundation, components, devslab.kr). The row can't get narrower than the sum of those words plus the gaps, and as a flex item of header.site it keeps min-width: auto:

page	narrowest words + 3 gaps	content box at 320px	result
icons.html	71 + 71 + 50 + 71 + 48 = 312px	272px	overflows the viewport (336px)
components.html / index.html	71 + 36 + 50 + 71 + 48 = 277px	272px	overflows the content box by 4.7px, hidden inside the 24px padding

So components.html only looked fine at 320. It has the same defect, and on all three pages every command was split after its -- onto 2–4 lines (> ./dds -- / foundation).

Fix

The same rule on all three pages, since it's one nav repeated across them:

• flex-wrap: wrap on the nav. Wrapped flex items start at their full width, so each command moves to the next row as a unit, and the row's floor becomes the single widest link (about 142px).
• Row gap --dds-space-8. On 16px lines that gives a 24px pitch, the web target-size floor (WCAG 2.5.8 spacing).
• The nav links on icons.html now take --dds-typo-label-line-height like the other two pages. Before, they inherited the 24px body line height, so the same nav was a different height on one page.

icons.html and components.html use --dds-* tokens only. index.html keeps its own hardcoded px convention, and gap: 8px 16px matches its header.site.

Verification

• New tests/browser/showcase.spec.ts (added to the foundation Playwright config, so CI runs it). It renders all three pages at 320 / 360 / 375 / 1440 and asserts no sideways scroll and one line per nav command. 9 of 12 failed before the change, 12 of 12 pass after. The pages are served from disk under a stand-in origin because icons.html imports icons.js as an ES module.
• Headless Chromium, before → after, light and dark:

	before (320)	after (320)
icons scrollWidth	336	320
nav right edge vs content edge	336.4 / 296	296 / 296
tallest nav link vs line height	72 / 24	16 / 16

At 360 and 375 all three pages wrap into 2 rows. At 1440 it stays one row, unchanged. Every row starts on the content's left edge, and the pitch is a uniform 24px.

• node --test tests/foundation-contracts.test.mjs: 11/11
• pnpm run verify: exit 0 (docs sync, including preview/index.html vs tokens, is in sync)
• pnpm run verify:foundation: 21 passed
• pnpm run verify:source:stage1-2: 22/22

Follow-up

devslab.kr vendors these pages to /dds/. After merge, resync there with DDS_REPO=<dds on main> node scripts/sync-dds-showcase.mjs in its own PR.