fix(website): keep the embedded spec brief from collapsing onto the tab strip

[gHashTag]

At 370px the embedded Spec Explorer drew its ABOUT THIS SPEC row across the tab strip below it. The summary was not at fault: its <details> parent is a flex item in a column with min-height: 0, so it was shrunk to 28px while the one row inside it needed 36. Opened, the same box was squeezed from 461px to 28px and drew over everything under it.

It no longer shrinks, and when open it takes what it needs up to 45vh and scrolls the rest. Both rules are scoped to .is-collapsible, which only exists in the embedded Explorer, so /specs is untouched.

{
  "version": 1,
  "head_sha": "e1b11264df0d9169598733dfd65a5cfdc88febdd",
  "summary": "The embedded Spec Explorer's collapsible brief no longer shrinks below its own content, so the ABOUT THIS SPEC row stops drawing itself over the tab strip at narrow widths.",
  "changes": [
    "apps/website/src/index.css: .spec-x-brief.is-collapsible now sets flex 0 0 auto, so the collapsed 36px summary row cannot be shrunk by its column flex parent.",
    "apps/website/src/index.css: the open collapsible brief is capped at 45vh with overflow auto and overscroll-behavior contain, so its content scrolls inside itself instead of pushing the tab strip and the code pane out of the pane.",
    "The standalone /specs page is unchanged, because both rules are scoped to .is-collapsible, which is applied only when the Explorer is embedded."
  ],
  "tests": [
    {
      "command": "npm run typecheck:ratchet",
      "result": "179 errors across 26 files, unchanged from the recorded baseline",
      "status": "passed",
      "evidence": "the runner printed: no file gained type errors"
    },
    {
      "command": "npm run build",
      "result": "the Vite production build completed without errors",
      "status": "passed",
      "evidence": "built in 12.93s after the rebase onto origin/main"
    },
    {
      "command": "npm run lint",
      "result": "ESLint reports 180 problems, the same count as origin/main",
      "status": "failed",
      "evidence": "the identical 180 problems appear with index.css reverted to origin/main, so the count is pre-existing"
    },
    {
      "command": "browser layout measurement at 320, 370, 420 and 900 CSS pixels",
      "result": "the summary box stays inside its details box at every width",
      "status": "passed",
      "evidence": "getBoundingClientRect on a 370px viewport: brief 36px tall, summary 28px, tab strip below it at y=161"
    },
    {
      "command": "browser layout measurement with the brief opened at 370 pixels",
      "result": "the open brief is 369px tall and scrolls its 468px of content",
      "status": "passed",
      "evidence": "the tab strip measured at y=495, below the brief rather than under it"
    },
    {
      "command": "npm run check:aria && npm run check:api",
      "result": "both contracts hold at their recorded baselines",
      "status": "passed",
      "evidence": "every ARIA reference resolves to a declared id; 110 read-but-never-emitted fields, at baseline"
    }
  ],
  "limitations": [
    "The 45vh cap is a judgement call: in a very short embedded frame the opened brief still takes nearly half the height before the code pane gets any.",
    "Measured in the in-app Chromium preview only; Safari and Firefox were not opened for this change.",
    "ESLint still reports 180 problems on this branch, which is the pre-existing count on origin/main and was not addressed here."
  ],
  "tags": ["website", "css", "layout", "SpecExplorer"],
  "blog": {
    "title": "A flex item with nothing left to give",
    "summary": "In the embedded Spec Explorer the ABOUT THIS SPEC row drew itself across the tab strip below it. The cause was not the summary but its parent: a flex item in a column with min-height zero, shrunk past the single row it contains.",
    "outline": [
      "The bug report was a screenshot at a narrow width: the ABOUT THIS SPEC row and the tab strip occupied the same band of pixels, one drawn on top of the other.",
      "Measuring rather than guessing found the details box 28 pixels tall while the summary inside it needed 36, which is only possible when something is shrinking the box below its own content.",
      "That something is the column flex parent: min-height zero lets a flex item shrink past its content, and a collapsed disclosure row has no slack of its own to give up.",
      "The fix refuses the shrink outright and, for the open state, caps the brief at 45vh and lets it scroll, so the tab strip and the code pane keep their own height."
    ]
  }
}