feat(sw): 3-column property compare, clamp Overview panel, narrower viewer file name

- Property Panel compare page: from 1080px, none/all stacked in column 1,
  circle and expanded side by side (2x2 and 1 column below)
- Overview Stage: the property panel is clamped to the Stage height so the
  Stage gets no scrollbar; the panel body scrolls
- Viewer header file name: clamp(140px, calc(45cqw - 256px), 360px) so a
  950px header shows no More; 1280px and wider unchanged

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

@@ -90,8 +90,14 @@ try {
       const colGap = b.cell.x - a.cell.right, colGap2 = d.cell.x - c.cell.right, rowGap = c.cell.y - Math.max(a.cell.bottom, b.cell.bottom)
       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.
-      const oneColumn = width < 720
-      if (oneColumn) check(`${width}: one column in order`, [a, b, c, d].every((cell, i, all) => i === 0 || (Math.abs(cell.cell.x - a.cell.x) < 0.5 && cell.cell.y >= all[i - 1].cell.bottom)), { a: a.cell, b: b.cell, c: c.cell, d: d.cell })
+      // 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
+      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
+        check(`${width}: 3 columns — none/all stacked, circle and expanded side by side`, Math.abs(a.cell.x - b.cell.x) < 0.5 && Math.abs(a.cell.y - c.cell.y) < 0.5 && Math.abs(a.cell.y - d.cell.y) < 0.5 && c.cell.x >= a.cell.right && d.cell.x >= c.cell.right, { a: a.cell, b: b.cell, c: c.cell, d: d.cell })
+        check(`${width}: consistent 24px stack and column gaps`, Object.values(gaps).every(v => Math.abs(v - 24) < 0.5), gaps)
+      } else if (oneColumn) check(`${width}: one column in order`, [a, b, c, d].every((cell, i, all) => i === 0 || (Math.abs(cell.cell.x - a.cell.x) < 0.5 && cell.cell.y >= all[i - 1].cell.bottom)), { a: a.cell, b: b.cell, c: c.cell, d: d.cell })
       else {
         check(`${width}: 2 columns × 2 rows by coordinates`, Math.abs(a.cell.y - b.cell.y) < 0.5 && Math.abs(c.cell.y - d.cell.y) < 0.5 && Math.abs(a.cell.x - c.cell.x) < 0.5 && Math.abs(b.cell.x - d.cell.x) < 0.5 && b.cell.x >= a.cell.right && c.cell.y >= Math.max(a.cell.bottom, b.cell.bottom), { a: a.cell, b: b.cell, c: c.cell, d: d.cell })
         check(`${width}: consistent 24px column and row gaps`, [colGap, colGap2, rowGap].every(v => Math.abs(v - 24) < 0.5), { colGap, colGap2, rowGap })