fix(storybook): refine responsive page inner width

- Story page Inner side margin: 16px up to a 480px viewport, linear to 60px at 768px, 60px beyond (no width jump)
- Follow the 60px margins: Responsive 1920 row from a 2040px page (was 2000px); property compare 3 columns from 1125px, 2 columns from 787px (was 1080 / 720)
- SW browser tests: drop the removed --sb-page-max-width override, compare thresholds 787 / 1125

packages/sw/tests/property-panel-comparison.browser.mjs

@@ -91,7 +91,9 @@ try {
       report.data[`gaps${width}`] = { colGap, colGap2, rowGap }
       // 2026-10-22 (user request): no Inner scroller; the page scrolls. 2 columns × 2 rows, one column below 720px.
       // 2026-10-26 (user request): from 1080px, 3 columns — none/all stacked in column 1, circle and expanded beside them.
-      const oneColumn = width < 720, threeColumns = width >= 1080
+      // 2026-11-05: the Story page Inner keeps 60px on each side (story-page.css), so the steps moved to 787px / 1125px
+      // (sw-stories.css .sw-story-compare--grid). It keeps 16px up to 480px (growing to 60px at 768px), so 390px has 358px.
+      const oneColumn = width < 787, threeColumns = width >= 1125
       if (threeColumns) {
         const gaps = { stack: b.cell.y - a.cell.bottom, col1: c.cell.x - Math.max(a.cell.right, b.cell.right), col2: d.cell.x - c.cell.right }
         report.data[`gaps${width}`] = gaps

packages/sw/tests/text-weight.browser.mjs

@@ -140,8 +140,8 @@ await page.keyboard.press('Escape')
 report.reference = { more: refMore[0], documents: refDocs[0], viewerItem: refViewerItem[0], viewerLabel: refViewerLabel[0] }
 
 await goto('sw-viewer--viewer-header')
-// The 1440px Story frame at full width (as the viewer suites): the header has room for every label.
-await page.addStyleTag({ content: '.sb-page { --sb-page-max-width: 100vw; }' }); await page.waitForTimeout(200)
+// The 1440px Story frame at full width (the 1920px page's Inner is 1800px): the header has room for every label.
+await page.waitForTimeout(200)
 const vh = page.locator('.hm-sw-viewer-header').first()
 const vNames = await styles('.hm-sw-viewer-header >> nth=0 >> :is(.hm-sw-header__document-name, .hm-sw-viewer-header__document-name, .hm-sw-viewer-header__label, .hm-sw-viewer-header__tab)')
 report.viewer = vNames

packages/sw/tests/theme-inheritance.browser.mjs

@@ -39,7 +39,6 @@ const newPage = async (width = 1440, height = 1000) => {
 const open = async (page, id) => {
   await page.goto(`${storybook}/iframe.html?id=${id}&viewMode=story`)
   await page.waitForSelector('#storybook-root > *')
-  await page.addStyleTag({ content: '.sb-page { --sb-page-max-width: 100vw; }' })
   await page.evaluate(() => document.fonts.ready)
   await page.waitForTimeout(300)
 }

packages/sw/tests/viewer-logo-document-menu-firefox.browser.mjs

@@ -46,8 +46,8 @@ const ev = async expr => { const r = await send('script.evaluate', { expression:
 const goto = async story => {
   await send('browsingContext.navigate', { context, url: `${base}/iframe.html?id=${story}&viewMode=story`, wait: 'complete' })
   for (let i = 0; i < 40; i++) { if (await ev(`!!document.querySelector('.hm-sw-viewer-header')`)) break; await sleep(250) }
-  // Lift the Story page envelope like the Chromium suites; scroll instantly (the preview sets smooth scrolling).
-  await ev(`(() => { const s = document.createElement('style'); s.textContent = '.sb-page { --sb-page-max-width: 100vw; } html { scroll-behavior: auto !important; }'; document.head.append(s); return true })()`)
+  // Scroll instantly (the preview sets smooth scrolling).
+  await ev(`(() => { const s = document.createElement('style'); s.textContent = 'html { scroll-behavior: auto !important; }'; document.head.append(s); return true })()`)
   await ev('document.fonts.ready.then(() => true)'); await sleep(400)
 }
 const frames = () => ev('new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r(true))))')

packages/sw/tests/viewer-logo-document-menu.browser.mjs

@@ -29,7 +29,6 @@ const newPage = async (width = 1920, height = 1000) => {
 const open = async (page, id) => {
   await page.goto(story(id))
   await page.waitForSelector('.hm-sw-viewer-header')
-  await page.addStyleTag({ content: '.sb-page { --sb-page-max-width: 100vw; }' })
   await page.evaluate(() => document.fonts.ready)
   await page.waitForTimeout(200)
 }

packages/sw/tests/viewer.browser.mjs

@@ -24,9 +24,10 @@ const newPage = async (width = 1440, height = 900) => {
   page.on('console', message => { if (message.type() === 'error' && !/favicon|404/.test(message.text())) errors.push(`${page.url()}: ${message.text()}`) })
   return page
 }
-// 2026-10-23: waits for a visible header (the Responsive Story's first, 1920px row is hidden below a 2000px page).
-// Test-only: lift the 1280px Story page envelope so the 1440px frames are measured at full width.
-const open = async (page, id) => { await page.goto(story(id)); await page.waitForSelector('.hm-sw-viewer-header:visible'); await page.addStyleTag({ content: '.sb-page { --sb-page-max-width: 100vw; }' }); await page.evaluate(() => document.fonts.ready); await page.waitForTimeout(200) }
+// 2026-10-23: waits for a visible header (the Responsive Story's first, 1920px row is hidden below a 2040px page).
+// 2026-11-05: the Story page Inner is the page width minus 60px on each side from a 768px viewport (16px up to 480px,
+// growing in between; story-page.css), so no envelope override is needed.
+const open = async (page, id) => { await page.goto(story(id)); await page.waitForSelector('.hm-sw-viewer-header:visible'); await page.evaluate(() => document.fonts.ready); await page.waitForTimeout(200) }
 const log = page => page.locator('[data-callback-log]').first().innerText()
 const box = locator => locator.boundingBox()
 
@@ -293,7 +294,7 @@ if (comparison.reference) {
 }
 {
   // Responsive: measured steps (full → icons only → More), no horizontal overflow; More collects the collapsed items.
-  // 2026-10-23: rows are picked by their data-width (not by position). The Story's 1920px row is hidden below a 2000px
+  // 2026-10-23: rows are picked by their data-width (not by position). The Story's 1920px row is hidden below a 2040px
   // page (sw-story-responsive-hidden), so the page is 2500px wide and every row is shown at its own maximum width.
   const page = await newPage(2500, 1200)
   await open(page, 'responsive')