style(storybook): refine foundation and navigation stories

src/components/navigation-menu.stories.tsx

@@ -83,10 +83,13 @@ function Specimen({ viewport = true }: { viewport?: boolean }) {
 
 // Size specimens to their review area (including the panel's 8px padding + 1px border on each side).
 // Mobile uses the content's natural minimum width instead of a fixed desktop specimen width.
-const frame = (node: ReactNode) => (
+// `minHeight: 256` reserves room for the open panel (about 232px below the menu bar) so it never covers what follows.
+// `compact` (representative page only) drops that reservation on PC (iframe width 1000px and up), where the two examples sit side by
+// side and nothing is below them; in the one-column layout below 1000px the 256px stays so an open menu does not cover the next example.
+const frame = (node: ReactNode, compact = false) => (
   <div
-    style={{ minHeight: 256, width: "100%", containerType: "inline-size" }}
-    className="max-md:[&_[data-viewport=false]_[data-slot=navigation-menu-content]]:absolute"
+    style={{ width: "100%", containerType: "inline-size", ...(compact ? {} : { minHeight: 256 }) }}
+    className={`max-md:[&_[data-viewport=false]_[data-slot=navigation-menu-content]]:absolute${compact ? " max-[999px]:min-h-64" : ""}`}
   >
     {node}
   </div>
@@ -102,21 +105,13 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Navigation Menu" />
-      <StorySection title="Overview">
-        <StateBoard
-          min={520}
-          states={[
-            { id: "viewport", label: "Viewport", children: frame(<Specimen />) },
-          ]}
-        />
-      </StorySection>
+      {/* Overview is merged into Variants (Viewport is its first item). Two equal columns on PC (iframe width 1000px and up), one
+          column below that; each specimen sits in its own single-column StateBoard (min larger than any column). */}
       <StorySection title="Variants">
-        <StateBoard
-          min={520}
-          states={[
-            { id: "no-viewport", label: "No viewport", children: frame(<Specimen viewport={false} />) },
-          ]}
-        />
+        <div className="grid items-start gap-6 min-[1000px]:grid-cols-2">
+          <StateBoard min={10000} states={[{ id: "viewport", label: "Viewport", children: frame(<Specimen />, true) }]} />
+          <StateBoard min={10000} states={[{ id: "no-viewport", label: "No viewport", children: frame(<Specimen viewport={false} />, true) }]} />
+        </div>
       </StorySection>
     </StoryPage>
   ),