Fix Paths or IDs accordion collapse behavior in Preview Generator V2 - PR_26126_045-preview-generator-v2-paths-accordion-collapse-fix

Author: DavidQ

docs/dev/reports/preview_generator_v2_paths_accordion_collapse_fix.txt

@@ -0,0 +1,45 @@
+PR_26126_045 Preview Generator V2 Paths accordion collapse fix
+
+Scope
+- Updated Preview Generator V2 accordion behavior only.
+- Updated tools/preview-generator-v2/previewGeneratorV2.css.
+- Extended tests/playwright/PreviewGeneratorV2Baseline.spec.mjs to assert the Paths or IDs collapse/expand contract.
+- No samples, schemas, or start_of_day files were modified.
+
+Fix
+- The Paths or IDs section had a center-panel stretch rule that applied whether the accordion was open or collapsed.
+- Changed the stretch rule to apply only when .preview-generator-v2__paths-section.is-open is present.
+- Added a collapsed rule so .preview-generator-v2__paths-section:not(.is-open) returns to header-only sizing.
+- Added an explicit hidden-content guard for .preview-generator-v2__paths-section .accordion-v2__content[hidden].
+
+Behavior preserved
+- Expanded Paths or IDs keeps the stretched center layout.
+- Collapsed Paths or IDs hides the content area and textarea.
+- Reopened Paths or IDs restores the stretched textarea/content layout.
+- Accordion aria-expanded and data-accordion-v2-icon-state continue to update through AccordionSection.
+- Generation behavior was not changed.
+
+Validation
+- node --check tests/playwright/PreviewGeneratorV2Baseline.spec.mjs passed.
+- npm run test:workspace-v2 passed.
+- Result: 3 passed.
+- Confirmed no samples, schemas, or start_of_day changes.
+
+Playwright coverage
+- Added a specific Paths or IDs accordion assertion that verifies:
+  - expanded content is visible and flex-stretched.
+  - collapsed content is hidden.
+  - textarea is hidden when collapsed.
+  - collapsed Paths section is no longer flex-stretched.
+  - reopened content is visible and flex-stretched again.
+  - icon state changes closed/open.
+
+Full samples smoke test
+- Skipped intentionally.
+- Reason: this PR is a targeted Preview Generator V2 accordion/CSS fix and does not modify sample JSON, sample launch code, or shared sample runtime behavior.
+
+Manual validation
+- Open tools/preview-generator-v2/index.html.
+- Collapse Paths or IDs and confirm only the header remains visible.
+- Reopen Paths or IDs and confirm the textarea returns and fills the available center space.
+- Confirm Generate Preview behavior is unchanged.

tests/playwright/PreviewGeneratorV2Baseline.spec.mjs

@@ -112,16 +112,75 @@ async function openPreviewGenerator(page, { withFakeRepo = false, validSampleIds
 async function expectAccordionToggles(page, contentId) {
   const header = page.locator(`.accordion-v2__header[aria-controls="${contentId}"]`);
   const content = page.locator(`#${contentId}`);
+  const icon = header.locator(".accordion-v2__icon");
   await expect(header).toBeVisible();
   await expect(content).toBeVisible();
 
   await header.click();
   await expect(content).toBeHidden();
   await expect(header).toHaveAttribute("aria-expanded", "false");
+  await expect(icon).toHaveAttribute("data-accordion-v2-icon-state", "closed");
 
   await header.click();
   await expect(content).toBeVisible();
   await expect(header).toHaveAttribute("aria-expanded", "true");
+  await expect(icon).toHaveAttribute("data-accordion-v2-icon-state", "open");
+}
+
+async function expectPathsOrIdsAccordionToggles(page) {
+  const header = page.locator('.accordion-v2__header[aria-controls="pathsOrIdsContent"]');
+  const content = page.locator("#pathsOrIdsContent");
+  const textarea = page.locator("#sampleList");
+  const icon = header.locator(".accordion-v2__icon");
+
+  const readLayout = async () => await page.evaluate(() => {
+    const section = document.querySelector(".preview-generator-v2__paths-section");
+    const contentEl = document.getElementById("pathsOrIdsContent");
+    const textareaEl = document.getElementById("sampleList");
+    return {
+      sectionFlex: getComputedStyle(section).flex,
+      sectionHeight: section.getBoundingClientRect().height,
+      contentDisplay: getComputedStyle(contentEl).display,
+      contentHidden: contentEl.hidden,
+      textareaHeight: textareaEl.getBoundingClientRect().height,
+      textareaHidden: textareaEl.checkVisibility ? !textareaEl.checkVisibility() : textareaEl.offsetParent === null
+    };
+  });
+
+  await expect(header).toBeVisible();
+  await expect(content).toBeVisible();
+  await expect(textarea).toBeVisible();
+  const expanded = await readLayout();
+  expect(expanded.sectionFlex).toContain("1 1");
+  expect(expanded.contentDisplay).toBe("flex");
+  expect(expanded.contentHidden).toBe(false);
+  expect(expanded.textareaHeight).toBeGreaterThan(0);
+  expect(expanded.textareaHidden).toBe(false);
+
+  await header.click();
+  await expect(content).toBeHidden();
+  await expect(textarea).toBeHidden();
+  await expect(header).toHaveAttribute("aria-expanded", "false");
+  await expect(icon).toHaveAttribute("data-accordion-v2-icon-state", "closed");
+  const collapsed = await readLayout();
+  expect(collapsed.sectionFlex).toContain("0 0");
+  expect(collapsed.contentDisplay).toBe("none");
+  expect(collapsed.contentHidden).toBe(true);
+  expect(collapsed.textareaHeight).toBe(0);
+  expect(collapsed.textareaHidden).toBe(true);
+  expect(collapsed.sectionHeight).toBeLessThanOrEqual(expanded.sectionHeight);
+
+  await header.click();
+  await expect(content).toBeVisible();
+  await expect(textarea).toBeVisible();
+  await expect(header).toHaveAttribute("aria-expanded", "true");
+  await expect(icon).toHaveAttribute("data-accordion-v2-icon-state", "open");
+  const reopened = await readLayout();
+  expect(reopened.sectionFlex).toContain("1 1");
+  expect(reopened.contentDisplay).toBe("flex");
+  expect(reopened.contentHidden).toBe(false);
+  expect(reopened.textareaHeight).toBeGreaterThan(0);
+  expect(reopened.textareaHidden).toBe(false);
 }
 
 test.describe("Preview Generator V2 baseline", () => {
@@ -243,6 +302,7 @@ test.describe("Preview Generator V2 baseline", () => {
       expect(pathsLayout.resize).toBe("none");
       expect(pathsLayout.contentHeight - pathsLayout.inputHeight).toBeLessThan(40);
       expect(pathsLayout.contentWidth - pathsLayout.inputWidth).toBeLessThan(40);
+      await expectPathsOrIdsAccordionToggles(page);
 
       await page.locator("#pickRepoBtn").click();
       await expect(page.locator("#repoSelectedValue")).toHaveText("HTML-JavaScript-Gaming");

tools/preview-generator-v2/previewGeneratorV2.css

@@ -22,16 +22,25 @@ body.tools-platform-tool-page[data-tool-id="preview-generator-v2"] > .palette-ma
   overflow: hidden;
 }
 
-.preview-generator-v2__center-panel .preview-generator-v2__paths-section {
+.preview-generator-v2__center-panel .preview-generator-v2__paths-section.is-open {
   flex: 1 1 auto;
   min-height: 0;
 }
 
+.preview-generator-v2__center-panel .preview-generator-v2__paths-section:not(.is-open) {
+  flex: 0 0 auto;
+  min-height: 0;
+}
+
 .preview-generator-v2__paths-section .accordion-v2__content {
   flex: 1 1 auto;
   min-height: 0;
 }
 
+.preview-generator-v2__paths-section .accordion-v2__content[hidden] {
+  display: none;
+}
+
 .preview-generator-v2__left-accordion .accordion-v2__content {
   overflow: visible;
 }