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/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')