fix(configurator): keep always-open generator from overlapping; update shell title

The redesigned ScaleGenerator is always-open (tall) instead of collapsed, so
as a flex child of the panel's scroll container it was compressed below its
content — the grid overflowed and overlapped the Apply button and the next
card, making the button unclickable in chromium (generator + undo-redo e2e
timeouts). Pin the section with flex-shrink: 0 and raise the inputs column
above the ramp so the controls are always hit-testable.

Also update shell.spec.js to assert the renamed "Core brand colors" card
(was "Brand & status colors" before the Colors accordion split).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea

Author: claude

configurator/src/components/ScaleGenerator.svelte

@@ -299,6 +299,10 @@
     border: 1px solid var(--cfg-border);
     border-radius: var(--cfg-radius);
     overflow: hidden;
+    /* In the panel's flex-column scroll container, don't let the section be
+       compressed below its content — a shrunk grid would overflow and overlap
+       the Apply button and the next card (chromium hit-testing). */
+    flex-shrink: 0;
   }
 
   .gen__head {
@@ -332,6 +336,10 @@
     display: flex;
     flex-direction: column;
     gap: 12px;
+    /* Keep the interactive column (Apply/Reset) above the ramp, which is
+       painted later in DOM order. */
+    position: relative;
+    z-index: 1;
   }
 
   .ctl-grid {

configurator/tests-e2e/shell.spec.js

@@ -39,8 +39,8 @@ test('every destination renders console-clean at 3 widths', async ({ page }) =>
 test('every category panel leads with Settings, with All variables collapsed below', async ({ page }) => {
   await gotoClean(page);
   await sideItem(page, 'Colors').click();
-  // Inputs-first: the brand-colors card is visible before any raw catalogue.
-  await expect(page.locator('.panel__card', { hasText: 'Brand & status colors' })).toBeVisible();
+  // Inputs-first: the core brand-colors card is visible before any raw catalogue.
+  await expect(page.locator('.panel__card', { hasText: 'Core brand colors' })).toBeVisible();
   // The full catalogue lives in a collapsed disclosure.
   const allvars = page.locator('details.allvars');
   await expect(allvars).toHaveCount(1);