Fix Palette fullscreen accordion shared height behavior - PR_26156_174-palette-fullscreen-accordion-flex-fix

Author: ToolboxAid

assets/theme-v2/css/accordion.css

@@ -140,3 +140,43 @@ details.vertical-accordion[open] summary:active:after {
   color: var(--muted);
   line-height: 1.5
 }
+
+body.tool-focus-mode .accordion-fill-stack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-18);
+  min-height: var(--space-0)
+}
+
+body.tool-focus-mode .accordion-fill-stack>.accordion-fill-panel {
+  flex: 0 0 auto;
+  min-height: var(--space-0)
+}
+
+body.tool-focus-mode .accordion-fill-stack>.accordion-fill-panel[open] {
+  flex: 1 1 var(--space-0);
+  min-height: var(--space-0);
+  position: relative
+}
+
+body.tool-focus-mode .accordion-fill-panel[open]>summary {
+  min-block-size: var(--space-52);
+  min-height: var(--space-0)
+}
+
+body.tool-focus-mode .accordion-fill-panel[open]>.accordion-scroll-body {
+  position: absolute;
+  inset: var(--space-52) var(--space-0) var(--space-0);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-18);
+  min-height: var(--space-0);
+  overflow: hidden
+}
+
+body.tool-focus-mode .accordion-scroll-body>.scroll-region {
+  flex: 1 1 var(--space-0);
+  min-height: var(--space-0);
+  overflow: auto
+}

assets/theme-v2/css/layout.css

@@ -232,6 +232,14 @@ body.tool-focus-mode .tool-center-panel {
   overflow: auto
 }
 
+body.tool-focus-mode .tool-center-panel--scroll-contained {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: var(--space-0);
+  overflow: hidden
+}
+
 body.tool-focus-mode .tool-column:first-of-type {
   grid-column: 1;
   grid-row: 1 / span 2

docs_build/dev/reports/palette-fullscreen-accordion-flex-fix-report.md

@@ -0,0 +1,48 @@
+# PR_26156_174 Palette Fullscreen Accordion Flex Fix Report
+
+## Result
+PASS
+
+## Summary
+- Fixed the Palette Tool fullscreen accordion layout regression with reusable Theme V2 layout classes.
+- Active Project Palette and Source Palette Browser now share available fullscreen vertical space evenly when both accordions are expanded.
+- Collapsing either accordion lets the remaining expanded accordion take the available space.
+- Scrolling is contained to the swatch grid wrappers; accordion headers, filter rows, and sort/size controls remain visible.
+
+## Theme V2 Gap
+Theme V2 did not have a reusable pattern for a fullscreen stacked accordion group where open accordions split remaining height and inner content scrolls independently from the accordion header and controls.
+
+Reusable classes were added to fill that gap:
+- `tool-center-panel--scroll-contained`
+- `accordion-fill-stack`
+- `accordion-fill-panel`
+- `accordion-scroll-body`
+- `scroll-region`
+
+## Implementation Notes
+- The Palette Tool center panel uses `tool-center-panel--scroll-contained` in focus mode to keep the center column height bounded by the fullscreen grid row.
+- The fullscreen accordion stack uses `accordion-fill-stack` and `accordion-fill-panel` so expanded panels share available height while collapsed panels keep only their header height.
+- Open accordion bodies use `accordion-scroll-body` and the swatch wrappers use `scroll-region` so only the palette grids scroll.
+- Existing Source Palette Browser loading, search, sort, size, Pin All, pin behavior, and empty-state behavior were preserved.
+- Existing Active Project Palette selected swatch, remove/unpin, sort, size, and tag behavior were preserved.
+
+## Validation
+- `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+  - PASS
+- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html assets/theme-v2/css/accordion.css assets/theme-v2/css/layout.css tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+  - PASS, no matches
+- `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
+  - PASS, 3 tests
+- `npm run test:playwright:static`
+  - PASS
+
+## Manual Verification Coverage
+- Both expanded accordions share fullscreen vertical space 50/50.
+- Collapsing Source Palette Browser expands Active Project Palette into the remaining space.
+- Collapsing Active Project Palette expands Source Palette Browser into the remaining space.
+- Swatch wrappers scroll independently while headers and control rows stay visible.
+- Source Palette Browser source data, Pin All, pin/unpin, sort, size, and search behavior remain covered by the targeted Palette Tool lane.
+- Active Project Palette selected swatch, remove/unpin, sort, size, and tag behavior remain covered by the targeted Palette Tool lane.
+
+## Skipped
+- Full samples smoke was not run, per BUILD instruction.

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -18,8 +18,6 @@ Exercised tool entry points detected:
 
 Changed runtime JS files covered:
 (87%) toolbox/colors/palette-workspace-repository.js - executed lines 1118/1118; executed functions 110/127
-(95%) toolbox/colors/colors.js - executed lines 745/745; executed functions 74/78
-(100%) toolbox/colors/palette-source-mock-db.js - executed lines 927/927; executed functions 6/6
 
 Files with executed line/function counts where available:
 (65%) toolbox/project-workspace/project-workspace-mock-repository.js - executed lines 402/402; executed functions 20/31
@@ -36,5 +34,3 @@ Uncovered or low-coverage changed JS files:
 Changed JS files considered:
 (0%) tests/playwright/tools/PaletteToolMockRepository.spec.mjs - changed JS file not collected as browser runtime coverage
 (87%) toolbox/colors/palette-workspace-repository.js - changed JS file with browser V8 coverage
-(95%) toolbox/colors/colors.js - changed JS file with browser V8 coverage
-(100%) toolbox/colors/palette-source-mock-db.js - changed JS file with browser V8 coverage

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,51 +1,41 @@
-# PR_26156_173 Testing Lane Execution Report
+# PR_26156_174 Testing Lane Execution Report
 
 ## Result
 PASS
 
 ## Commands Run
-- `node --check toolbox/colors/palette-source-mock-db.js`
-  - PASS
-- `node --check toolbox/colors/palette-workspace-repository.js`
-  - PASS
-- `node --check toolbox/colors/colors.js`
-  - PASS
 - `node --check tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
   - PASS
-- `rg "DEFAULT_SOURCE_PALETTES" toolbox/colors tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
+- `rg "style=|<style|onclick|onchange|oninput|onsubmit" toolbox/colors/index.html assets/theme-v2/css/accordion.css assets/theme-v2/css/layout.css tests/playwright/tools/PaletteToolMockRepository.spec.mjs`
   - PASS, no matches
-- `node --input-type=module -e "import('./toolbox/colors/palette-workspace-repository.js').then(({createProjectWorkspacePaletteRepository})=>{ const repo=createProjectWorkspacePaletteRepository(); console.log(repo.sourcePaletteOptions().map((option)=>option.label + ' (' + option.swatchCount + ')').join('|')); })"`
-  - PASS, source options include `8-color set`, `16-color set`, `24-color set`, `32-color set`, `48-color set`, `64-color set`, `96-color set`, `120-color set`, `150-color set`, `JavaScript`, and `W3C`
 - `npx playwright test tests/playwright/tools/PaletteToolMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list`
   - PASS, 3 tests
 - `npm run test:playwright:static`
   - PASS
+- `git diff --check`
+  - PASS
 
 ## Required Lanes
-- Targeted Palette Tool runtime/UI lane: PASS.
+- Targeted Palette Tool fullscreen UI lane: PASS.
 - Changed-file/static validation: PASS.
 
 ## Playwright Coverage
-- DB-backed source palette dropdown lists required mock DB palettes: PASS.
-- Source palette records render visible swatches: PASS.
-- Empty source table shows `No source palette`: PASS.
-- Invalid source records with no dropdown options show visible diagnostic: PASS.
-- Pin from Source Palette Browser adds to active Palette Colors: PASS.
-- Repeat pinning does not duplicate an existing active palette color: PASS.
-- Clicking the active Palette Colors pin indicator removes that color only from the active user palette: PASS.
-- Palette Colors count updates after add/remove: PASS.
-- Selected state clears when selected color is removed: PASS.
-- Source palette records remain available after active color removal: PASS.
-- Color Harmony Schemes does not render the selected/base swatch: PASS.
-- Harmony Add Selected and Add All continue from the remaining generated swatches: PASS.
+- Fullscreen center panel overflow is hidden so page-level center scrolling is disabled: PASS.
+- Active Project Palette and Source Palette Browser split fullscreen vertical space evenly when both are expanded: PASS.
+- Collapsing Source Palette Browser expands Active Project Palette into the remaining available space: PASS.
+- Collapsing Active Project Palette expands Source Palette Browser into the remaining available space: PASS.
+- Active Project Palette swatch wrapper scrolls while its summary and control row stay fixed: PASS.
+- Source Palette Browser swatch wrapper scrolls while its summary and filter/control rows stay fixed: PASS.
+- Source Palette Browser DB-backed source loading, Pin All, pin, sort, size, and search behavior remain covered: PASS.
+- Active Project Palette selected swatch, remove/unpin, sort, size, and tag behavior remain covered: PASS.
 
 ## Impacted Lane
 - Palette Tool runtime/UI lane.
-- Theme V2 static validation for the reusable swatch pin interaction target.
+- Theme V2 static validation for reusable fullscreen accordion layout classes.
 
 ## Skipped Lanes
 - Full samples smoke was skipped by BUILD instruction.
-- Broader tool lanes were skipped because changes are confined to Palette Tool runtime/mock DB behavior, one reusable Theme V2 swatch pin interaction, and the targeted Palette Tool spec.
+- Broader tool lanes were skipped because changes are confined to Palette Tool fullscreen layout, reusable Theme V2 layout CSS, and the targeted Palette Tool spec.
 
 ## Not Run
 - Full samples smoke was not run, per BUILD instruction.

tests/playwright/tools/PaletteToolMockRepository.spec.mjs

@@ -150,6 +150,41 @@ async function expectControlGroupsShareLine(page, sortSelector, sizeSelector) {
   expect(Math.abs(sortCenter - sizeCenter)).toBeLessThan(4);
 }
 
+async function expectSwatchRegionScrollsOnly(page, scrollSelector, controlsSelector, summarySelector) {
+  const scrollRegion = page.locator(scrollSelector);
+  const controls = page.locator(controlsSelector);
+  const summary = page.locator(summarySelector);
+  const metrics = await scrollRegion.evaluate((node) => {
+    const style = getComputedStyle(node);
+    return {
+      clientHeight: node.clientHeight,
+      overflowY: style.overflowY,
+      scrollHeight: node.scrollHeight
+    };
+  });
+  expect(metrics.overflowY).toMatch(/auto|scroll/);
+  expect(metrics.scrollHeight).toBeGreaterThan(metrics.clientHeight);
+  const controlsBefore = await controls.boundingBox();
+  const summaryBefore = await summary.boundingBox();
+  await scrollRegion.evaluate((node) => {
+    node.scrollTop = node.scrollHeight;
+  });
+  const controlsAfter = await controls.boundingBox();
+  const summaryAfter = await summary.boundingBox();
+  expect(Math.abs((controlsBefore?.y || 0) - (controlsAfter?.y || 0))).toBeLessThan(2);
+  expect(Math.abs((summaryBefore?.y || 0) - (summaryAfter?.y || 0))).toBeLessThan(2);
+}
+
+async function expectFullscreenAccordionSplit(page) {
+  const projectBox = await page.locator("[data-palette-project-accordion]").boundingBox();
+  const sourceBox = await page.locator("[data-palette-source-accordion]").boundingBox();
+  expect(projectBox?.height || 0).toBeGreaterThan(180);
+  expect(sourceBox?.height || 0).toBeGreaterThan(180);
+  expect(Math.abs((projectBox?.height || 0) - (sourceBox?.height || 0))).toBeLessThan(12);
+  expect(sourceBox?.y || 0).toBeGreaterThan((projectBox?.y || 0) + (projectBox?.height || 0) - 4);
+  return { projectBox, sourceBox };
+}
+
 test("Palette repository owns active project swatches without mutating invalid payloads", async () => {
   const emptyRepository = createProjectWorkspacePaletteRepository({ tables: { palette_source_swatches: [] } });
   expect(emptyRepository.sourcePaletteOptions()).toEqual([]);
@@ -475,14 +510,46 @@ test("Palette Tool adds, updates, pins, validates, and shows project-owned detai
     await page.locator("[data-palette-harmony-add-all]").click();
     await expect(page.locator("[data-palette-log]")).toContainText("Harmony add complete");
 
+    await page.locator("[data-palette-source-select]").selectOption("javascript");
+    await expect(page.locator("[data-palette-source-index]")).toHaveCount(140);
+    await page.locator("[data-palette-source-pin-all]").click();
+    await expect(page.locator("[data-palette-log]")).toContainText("Pin All complete");
+
     await page.getByLabel("Tool Display Mode").click();
     await expect(page.locator("body")).toHaveClass(/tool-focus-mode/);
-    const projectBox = await page.locator("[data-palette-project-accordion]").boundingBox();
-    const sourceBox = await page.locator("[data-palette-source-accordion]").boundingBox();
+    await expect(page.locator(".tool-center-panel")).toHaveCSS("overflow-y", "hidden");
+    const { projectBox, sourceBox } = await expectFullscreenAccordionSplit(page);
     expect(projectBox?.width || 0).toBeGreaterThan(300);
     expect(sourceBox?.width || 0).toBeGreaterThan(300);
-    expect(sourceBox?.y || 0).toBeGreaterThan((projectBox?.y || 0) + (projectBox?.height || 0) - 4);
     expect(Math.abs((projectBox?.width || 0) - (sourceBox?.width || 0))).toBeLessThan(80);
+    await expectSwatchRegionScrollsOnly(
+      page,
+      "[data-palette-user-scroll]",
+      "[aria-label='Active project palette controls']",
+      "[data-palette-project-accordion] > summary"
+    );
+    await expectSwatchRegionScrollsOnly(
+      page,
+      "[data-palette-source-scroll]",
+      "[aria-label='Source palette controls']",
+      "[data-palette-source-accordion] > summary"
+    );
+
+    await page.locator("[data-palette-source-accordion] > summary").click();
+    await expect(page.locator("[data-palette-source-accordion]")).not.toHaveAttribute("open", "");
+    const projectOnlyBox = await page.locator("[data-palette-project-accordion]").boundingBox();
+    const collapsedSourceBox = await page.locator("[data-palette-source-accordion]").boundingBox();
+    expect(projectOnlyBox?.height || 0).toBeGreaterThan((projectBox?.height || 0) * 1.45);
+    expect(collapsedSourceBox?.height || 0).toBeLessThan((sourceBox?.height || 0) * 0.45);
+
+    await page.locator("[data-palette-source-accordion] > summary").click();
+    await expect(page.locator("[data-palette-source-accordion]")).toHaveAttribute("open", "");
+    await page.locator("[data-palette-project-accordion] > summary").click();
+    await expect(page.locator("[data-palette-project-accordion]")).not.toHaveAttribute("open", "");
+    const collapsedProjectBox = await page.locator("[data-palette-project-accordion]").boundingBox();
+    const sourceOnlyBox = await page.locator("[data-palette-source-accordion]").boundingBox();
+    expect(sourceOnlyBox?.height || 0).toBeGreaterThan((sourceBox?.height || 0) * 1.45);
+    expect(collapsedProjectBox?.height || 0).toBeLessThan((projectBox?.height || 0) * 0.45);
 
     expectNoPageFailures(failures);
   } finally {

toolbox/colors/index.html

@@ -91,7 +91,7 @@ <h2>Palette</h2>
                         </div>
                     </aside>
                     <div data-tool-display-mode data-asset-root="assets/theme-v2/images" data-tool-slug="colors" data-tool-icon-src="assets/theme-v2/images/badges/colors.png" data-tool-character-src="assets/theme-v2/images/characters/palette-manager.png"></div>
-                    <section class="tool-center-panel">
+                    <section class="tool-center-panel tool-center-panel--scroll-contained">
                         <h2>Palette Colors</h2>
                         <div class="grid cols-3" aria-label="Palette summary">
                             <article class="mini-stat"><strong data-palette-count>0</strong>Palette Colors</article>
@@ -108,24 +108,24 @@ <h3 id="palette-tool-project-overlay-title">Active Project Required</h3>
                                 <a class="btn" href="toolbox/project-workspace/index.html">Open Project Workspace</a>
                             </div>
                         </article>
-                        <div class="content-stack" data-palette-fullscreen-panels>
-                            <details class="vertical-accordion" open data-palette-project-accordion>
+                        <div class="content-stack accordion-fill-stack" data-palette-fullscreen-panels>
+                            <details class="vertical-accordion accordion-fill-panel" open data-palette-project-accordion>
                                 <summary>Active Project Palette</summary>
-                                <div class="accordion-body content-stack">
+                                <div class="accordion-body content-stack accordion-scroll-body">
                                     <div class="grid cols-2" aria-label="Active project palette controls">
                                         <div class="action-group" aria-label="Active project palette sort" data-palette-user-sort></div>
                                         <div class="action-group action-group--end" aria-label="Active project palette size" data-palette-user-size></div>
                                     </div>
-                                    <div class="palette-swatch-list-wrapper" data-palette-user-scroll>
+                                    <div class="palette-swatch-list-wrapper scroll-region" data-palette-user-scroll>
                                         <div class="palette-swatch-list" role="group" aria-label="Active project palette colors" data-palette-user-list>
                                             <p class="status">No project palette colors yet.</p>
                                         </div>
                                     </div>
                                 </div>
                             </details>
-                            <details class="vertical-accordion" open data-palette-source-accordion>
+                            <details class="vertical-accordion accordion-fill-panel" open data-palette-source-accordion>
                                 <summary>Source Palette Browser</summary>
-                                <div class="accordion-body content-stack">
+                                <div class="accordion-body content-stack accordion-scroll-body">
                                     <div class="content-stack content-stack--compact" aria-label="Source palette controls">
                                         <div class="content-cluster" aria-label="Source palette filters">
                                             <label for="paletteSourceSelect">Source</label>
@@ -139,7 +139,7 @@ <h3 id="palette-tool-project-overlay-title">Active Project Required</h3>
                                             <div class="action-group action-group--end" aria-label="Source swatches size" data-palette-source-size></div>
                                         </div>
                                     </div>
-                                    <div class="palette-swatch-list-wrapper" data-palette-source-scroll>
+                                    <div class="palette-swatch-list-wrapper scroll-region" data-palette-source-scroll>
                                         <div class="palette-swatch-list" role="group" aria-label="Source palette colors" data-palette-source-list>
                                             <p class="status">No source colors available.</p>
                                         </div>