Tab row: fit nine tabs inside the centre column

The ninth tab (Shader) pushed the row past the centre column: List
ended at 962 while the column ended at 925, so the last buttons sat
under the inspector and clickText('Container') hit the List tab
instead (CI runs 5 and 6, module 16). Tab buttons now use padding 4
via a new Button padding option; e2e step 14b guards the row width
using the widget box rather than getBounds(), which sees only the
label on an untoggled ghost button.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

tools/e2e/14-overflow.mjs

@@ -38,7 +38,20 @@ export async function overflow(t) {
     );
   }
 
-  // 14b. Every tab, because each one owns a different set of controls.
+  // 14b. The tab row itself: a button past the centre column's edge sits under the inspector, and
+  //      a click on it lands there (nine tabs on a 90 px floor did exactly that at 1280 px wide).
+  await evaluate("__gm.showTab('scene')");
+  await sleep(300);
+  const column = await json('__gm.viewportRect()');
+  const tabs = await json('__gm.tabBounds()');
+  const spilled = Object.entries(tabs).filter(([, b]) => b.right > column.x + column.w);
+  check(
+    'every tab button ends inside the centre column',
+    spilled.length === 0,
+    JSON.stringify({ spilled, columnRight: column.x + column.w }),
+  );
+
+  // 14c. Every tab, because each one owns a different set of controls.
   for (const tab of ['scene', 'graph', 'texture', 'game', 'container', 'list']) {
     await evaluate(`__gm.showTab(${JSON.stringify(tab)})`);
     await sleep(400);
@@ -50,7 +63,7 @@ export async function overflow(t) {
     );
   }
 
-  // 14c. Shortened, not simply dropped: the value must still be readable and marked as cut.
+  // 14d. Shortened, not simply dropped: the value must still be readable and marked as cut.
   await evaluate("__gm.showTab('graph')");
   await sleep(400);
   const shown = (await json('__gm.textOverflows(true)')).find((e) => e.text.startsWith('Player movement'));
@@ -61,7 +74,7 @@ export async function overflow(t) {
   );
   await shot('36-long-labels');
 
-  // 14d. An inspector full of dropdowns – the parent row and the enum fields – with a selection
+  // 14e. An inspector full of dropdowns – the parent row and the enum fields – with a selection
   //      whose asset name is now overlong too.
   await evaluate("__gm.showTab('scene')");
   await sleep(300);
@@ -70,7 +83,7 @@ export async function overflow(t) {
   const inspector = await json('__gm.textOverflows()');
   check('no label spills in the inspector', inspector.length === 0, JSON.stringify(inspector));
 
-  // 14e. The other direction: a control narrow enough to swallow its whole label draws nothing
+  // 14f. The other direction: a control narrow enough to swallow its whole label draws nothing
   //      at all, which the overflow walk cannot see – an empty text spills over no edge.
   for (const tab of ['scene', 'graph', 'texture', 'container', 'list']) {
     await evaluate(`__gm.showTab(${JSON.stringify(tab)})`);