Fix Workspace Manager V2 layout spacing and move context JSON into accordion - PR_26127_003-workspace-manager-v2-layout-space-fix

Author: DavidQ

docs/dev/reports/PR_26127_003-workspace-manager-v2-layout-space-fix.md

@@ -0,0 +1,28 @@
+# PR_26127_003-workspace-manager-v2-layout-space-fix
+
+## Scope
+- Updated Workspace Manager V2 layout only.
+- Kept Tools above Workspace Context.
+- Kept tool grouping labels: Editors, Utilities, Viewers.
+- Kept tile action labels: How To Use, Read Me, Samples (x).
+- Did not modify deprecated `tools/workspace-v2`.
+- Did not modify sample JSON.
+- Did not add fallback behavior.
+
+## Layout Notes
+- Tools is now a compact accordion that sizes to the listed tool tiles instead of consuming extra panel height.
+- Workspace Context is now a compact accordion containing only the active palette, asset registry, and launch context summary tiles.
+- Workspace JSON is now a separate accordion that owns `#workspaceContextOutput` and can use the remaining center-panel space.
+- The Workspace Context summary tiles keep consistent height while the JSON output is isolated from the summary control.
+
+## Validation
+- PASS: `node --check tests/playwright/tools/WorkspaceManagerV2.spec.mjs`
+- PASS: `npm run test:workspace-v2` completed with 24 passed tests.
+- PASS: Scope check found no diffs under deprecated `tools/workspace-v2` or sample schema paths.
+- SKIPPED: Full samples smoke test, per PR instructions. This PR is Workspace Manager V2 layout scoped.
+
+## Manual Validation Notes
+- Verified the center panel order is Tools, Workspace Context, then Workspace JSON.
+- Verified Tools and Workspace Context do not use the shared open-accordion fill behavior.
+- Verified Workspace Context JSON moved out of the Workspace Context accordion and into its own accordion section.
+- Verified Workspace Manager V2 launch, import/export, UAT, and tool tile flows remain covered by `npm run test:workspace-v2`.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -170,11 +170,35 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await expect(page.locator("#launchAssetManagerV2Button")).toHaveCount(0);
       await expect(page.locator("#workspaceToolsContent #workspaceToolTiles")).toBeVisible();
       await expect(page.locator("#workspaceContextContent #workspaceToolTiles")).toHaveCount(0);
+      await expect(page.locator("#workspaceContextContent #workspaceContextOutput")).toHaveCount(0);
+      await expect(page.locator("#workspaceJsonContent #workspaceContextOutput")).toBeVisible();
       const centerControlLabels = await page.locator(".workspace-manager-v2__panel--center > .accordion-v2 > .accordion-v2__header span:first-child")
         .evaluateAll((labels) => labels.map((label) => label.textContent.trim()));
-      expect(centerControlLabels.slice(0, 2)).toEqual(["Tools", "Workspace Context"]);
+      expect(centerControlLabels.slice(0, 3)).toEqual(["Tools", "Workspace Context", "Workspace JSON"]);
       await expect(page.locator("#workspaceToolTiles [data-workspace-tool-id]")).toHaveCount(5);
       expect(await page.locator("#workspaceToolTiles [data-workspace-tool-id]").evaluateAll((tiles) => tiles.every((tile) => tile.disabled))).toBe(true);
+      const compactCenterLayout = await page.evaluate(() => {
+        const getRect = (selector) => {
+          const element = document.querySelector(selector);
+          return element ? element.getBoundingClientRect() : null;
+        };
+        const toolsRect = getRect(".workspace-manager-v2__accordion--tools");
+        const toolGridRect = getRect("#workspaceToolTiles");
+        const contextRect = getRect(".workspace-manager-v2__accordion--context");
+        const summaryGridRect = getRect(".workspace-manager-v2__summary-grid");
+        const jsonRect = getRect(".workspace-manager-v2__accordion--json");
+        return {
+          contextExtraHeight: Math.round(contextRect.height - summaryGridRect.height),
+          contextHeight: Math.round(contextRect.height),
+          jsonTop: Math.round(jsonRect.top),
+          toolsBottom: Math.round(toolsRect.bottom),
+          toolsExtraHeight: Math.round(toolsRect.height - toolGridRect.height),
+          toolsHeight: Math.round(toolsRect.height)
+        };
+      });
+      expect(compactCenterLayout.toolsExtraHeight).toBeLessThanOrEqual(90);
+      expect(compactCenterLayout.contextExtraHeight).toBeLessThanOrEqual(90);
+      expect(compactCenterLayout.jsonTop).toBeGreaterThan(compactCenterLayout.toolsBottom);
       await expect(page.locator("#activeGameSelect option")).toHaveText([
         "Select a game",
         "Asteroids",

tools/workspace-manager-v2/index.html

@@ -69,7 +69,7 @@ <h2 class="tools-platform-frame__eyebrow">Games-only launch context</h2>
           </div>
         </section>
 
-        <section class="accordion-v2 workspace-manager-v2__accordion workspace-manager-v2__accordion--fill is-open" data-accordion-v2-open="true">
+        <section class="accordion-v2 workspace-manager-v2__accordion workspace-manager-v2__accordion--context is-open" data-accordion-v2-open="true">
           <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="workspaceContextContent">
             <span>Workspace Context</span>
             <span class="accordion-v2__icon" aria-hidden="true">+</span>
@@ -89,6 +89,15 @@ <h2>Launch Context</h2>
                 <p id="launchContextSummary">Asset Manager V2 launch is waiting for a game and palette.</p>
               </section>
             </div>
+          </div>
+        </section>
+
+        <section class="accordion-v2 workspace-manager-v2__accordion workspace-manager-v2__accordion--json workspace-manager-v2__accordion--fill is-open" data-accordion-v2-open="true">
+          <button class="accordion-v2__header" type="button" aria-expanded="true" aria-controls="workspaceJsonContent">
+            <span>Workspace JSON</span>
+            <span class="accordion-v2__icon" aria-hidden="true">+</span>
+          </button>
+          <div id="workspaceJsonContent" class="accordion-v2__content">
             <pre id="workspaceContextOutput" class="workspace-manager-v2__output">{}</pre>
           </div>
         </section>

tools/workspace-manager-v2/styles/workspaceManagerV2.css

@@ -201,6 +201,15 @@ textarea:hover {
   flex: 0 0 auto;
 }
 
+.workspace-manager-v2__accordion--tools.is-open,
+.workspace-manager-v2__accordion--context.is-open {
+  flex: 0 0 auto;
+}
+
+.workspace-manager-v2__accordion--json.is-open {
+  flex: 1 1 auto;
+}
+
 .accordion-v2__header {
   width: 100%;
   min-height: 42px;
@@ -246,6 +255,15 @@ textarea:hover {
   display: none;
 }
 
+.workspace-manager-v2__accordion--tools .accordion-v2__content,
+.workspace-manager-v2__accordion--context .accordion-v2__content {
+  flex: 0 0 auto;
+}
+
+.workspace-manager-v2__accordion--json .accordion-v2__content {
+  flex: 1 1 auto;
+}
+
 .workspace-manager-v2__field {
   display: grid;
   gap: 6px;
@@ -357,6 +375,11 @@ textarea:hover {
   white-space: pre-wrap;
 }
 
+.workspace-manager-v2__accordion--json .workspace-manager-v2__output {
+  height: 100%;
+  min-height: 0;
+}
+
 .workspace-manager-v2__status-accordion-header {
   cursor: pointer;
 }