Fix Tool Display Mode image and navigation layout - PR_26156_122-tool-display-mode-layout-fix

Author: ToolboxAid

assets/theme-v2/css/panels.css

@@ -282,8 +282,8 @@
 }
 
 .tool-display-mode__badge {
-  width: var(--tool-display-media-size);
-  height: var(--tool-display-media-size);
+  width: 64px;
+  height: 64px;
   object-fit: cover;
   object-position: center;
   border: var(--border-standard);
@@ -292,17 +292,34 @@
 }
 
 .tool-display-mode__body {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(var(--space-0), 1fr);
+  grid-template-rows: auto auto;
   align-items: center;
-  gap: var(--space-0);
+  column-gap: var(--space-15);
+  row-gap: var(--space-8);
   min-width: var(--space-0);
   padding: var(--space-10) var(--space-14) var(--space-10) var(--space-0)
 }
 
+.tool-display-mode__identity-row {
+  display: contents
+}
+
+.tool-display-mode__navigation-row {
+  grid-column: 2;
+  grid-row: 2;
+  display: flex;
+  align-items: center;
+  gap: var(--space-14);
+  flex-wrap: wrap
+}
+
 .tool-display-mode__character {
-  width: 150px;
-  height: 150px;
-  margin-right: var(--space-15);
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  width: 225px;
+  height: 127px;
   object-fit: contain;
   display: block;
   flex: 0 0 auto
@@ -314,6 +331,8 @@
 }
 
 .tool-display-mode__description {
+  grid-column: 2;
+  grid-row: 1;
   color: var(--gold);
   font-weight: var(--font-weight-heavy);
   overflow: hidden;

docs_build/dev/codex_commands.md

@@ -699,3 +699,31 @@ Required reports:
 - `docs_build/dev/reports/testing_lane_execution_report.md`
 - `docs_build/dev/reports/codex_changed_files.txt`
 - `docs_build/dev/reports/codex_review.diff`
+
+
+## PR_26156_122
+
+Changes:
+- Read `docs_build/dev/PROJECT_INSTRUCTIONS.md`.
+- Updated shared Tool Display Mode Theme V2 styling in `assets/theme-v2/css/panels.css`.
+- Set `.tool-display-mode__badge` to `64px` by `64px`.
+- Set `.tool-display-mode__character` to `225px` by `127px`.
+- Moved Tool Display Mode body layout to a two-column grid so description sits to the right of the character and navigation sits below the description area.
+- Preserved existing Tool Display Mode JavaScript, generated markup, and registry previous/next link behavior.
+- Added targeted Tool Display Mode Playwright/MSJ coverage for badge size, character size, description placement, and navigation placement.
+- Did not add inline styles, style blocks, script blocks, inline event handlers, page-local CSS, or tool-local CSS.
+- Did not modify unrelated tool content.
+- Did not modify `start_of_day`.
+
+Validation:
+- `node --check tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs`
+- `npm run test:lane:tool-display-mode`
+- Scoped `git diff --check` for changed implementation/test/report files.
+- Targeted changed-file scan confirmed no inline styles, style blocks, inline scripts, inline event handlers, or `start_of_day` file changes were introduced.
+- Full samples smoke: skipped by request.
+
+Required reports:
+- `docs_build/dev/reports/tool-display-mode-layout-fix-report.md`
+- `docs_build/dev/reports/testing_lane_execution_report.md`
+- `docs_build/dev/reports/codex_changed_files.txt`
+- `docs_build/dev/reports/codex_review.diff`

docs_build/dev/commit_comment.txt

@@ -1 +1 @@
-Add reusable Theme V2 tool form table layout - PR_26156_121-tool-form-table-layout-standard
+Fix Tool Display Mode media and navigation layout - PR_26156_122-tool-display-mode-layout-fix

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,6 +1,6 @@
 # Testing Lane Execution Report
 
-Generated: 2026-06-05T13:05:49.934Z
+Generated: 2026-06-05T13:20:23.710Z
 Dry run: No
 
 ## Summary
@@ -9,7 +9,7 @@ PASS: 1
 WARN: 0
 FAIL: 0
 SKIP: 13
-Total lane elapsed time: 16.48s
+Total lane elapsed time: 18.48s
 Actual browser launches: 1
 
 ## Full Samples Smoke
@@ -21,7 +21,7 @@ Reason: Skipped because changed files do not modify sample JSON or shared sample
 
 Status: PASS
 Reason: Runner preflight and Playwright structure audit passed before expensive lane execution.
-Command: C:\nvm4w\nodejs\node.exe scripts/audit-playwright-test-locations.mjs --discovery-report docs_build/dev/reports/playwright_discovery_ownership_report.md --scope-report docs_build/dev/reports/playwright_discovery_scope_report.md --scan-report docs_build/dev/reports/filesystem_scan_reduction_report.md --lanes game-design --targets tests/playwright/tools/GameDesignMockRepository.spec.mjs --helpers tests/helpers/playwrightRepoServer.mjs,tests/helpers/playwrightStorageIsolation.mjs,tests/helpers/playwrightV8CoverageReporter.mjs,tests/helpers/workspaceV2CoverageReporter.mjs
+Command: C:\nvm4w\nodejs\node.exe scripts/audit-playwright-test-locations.mjs --discovery-report docs_build/dev/reports/playwright_discovery_ownership_report.md --scope-report docs_build/dev/reports/playwright_discovery_scope_report.md --scan-report docs_build/dev/reports/filesystem_scan_reduction_report.md --lanes tool-display-mode --targets tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs --helpers tests/helpers/playwrightRepoServer.mjs,tests/helpers/playwrightStorageIsolation.mjs,tests/helpers/playwrightV8CoverageReporter.mjs,tests/helpers/workspaceV2CoverageReporter.mjs
 Details: none
 
 ## Dependency Gate
@@ -32,7 +32,7 @@ Reason: No deterministic dependency failures before runtime.
 ## Runtime Scheduling
 
 Status: PASS
-Scheduled lane order: game-design
+Scheduled lane order: tool-display-mode
 Reused runtime sessions: 0
 Reused lane snapshots: 0
 Reused warm-start lanes: 0
@@ -61,7 +61,7 @@ Prevented broad lane escalation: 0
 ## Discovery Scope
 
 Status: PASS
-Target files: tests/playwright/tools/GameDesignMockRepository.spec.mjs
+Target files: tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs
 Required shared helpers: tests/helpers/playwrightRepoServer.mjs, tests/helpers/playwrightStorageIsolation.mjs, tests/helpers/playwrightV8CoverageReporter.mjs, tests/helpers/workspaceV2CoverageReporter.mjs
 Required fixtures: none
 Targeted file/helper reads: 5
@@ -71,24 +71,24 @@ Prevented fallback expansion: Yes; no ownership or scope blocker widened into br
 ## Targeted File Manifests
 
 Status: PASS
-Generated manifests: game-design:PASS
+Generated manifests: tool-display-mode:PASS
 Prevented discovery expansion: Yes
 Prevented redundant scans: 4
-Persistent manifest events: game-design:INVALIDATED
+Persistent manifest events: tool-display-mode:INVALIDATED
 
 ## Warm-Start Reuse
 
 Status: PASS
-Warm-start events: game-design:INVALIDATED
-Dependency hydration events: game-design:INVALIDATED
+Warm-start events: tool-display-mode:INVALIDATED
+Dependency hydration events: tool-display-mode:INVALIDATED
 Prevented redundant initialization: 0
 Prevented helper resolution passes: 0
 Prevented fixture ownership traversal: 0
 
 ## Lane Snapshots
 
 Status: PASS
-Snapshot events: game-design:INVALIDATED
+Snapshot events: tool-display-mode:INVALIDATED
 Reused snapshots: 0
 Invalidated snapshots: 1
 Prevented graph rebuilds: 0
@@ -107,12 +107,12 @@ Prevented Workspace lane reruns: 0
 | --- | --- | --- | --- | --- | --- | --- |
 | workspace-contract | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Root tools future-state navigation and Tool Template V2 contract | repo-served root tools page; Tool Template V2 future-state page; Theme V2 shared partials and assets |
 | project-workspace | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Project Workspace mock repository, Project Workspace UI, and Toolbox Progress/Build Path project-state bridge | repo-served Project Workspace page; repo-served Toolbox page with role simulation; in-memory SQL-shaped mock project repository |
-| game-design | PASS | 16.48s | 1 | Game Design rebuild slice validates the active project context, design save/update, actionable validation, capability demo authoring, and Toolbox progress handoff without exercising unrelated toolbox routes. | Game Design mock repository, project purpose flow, validation overlay, capability demo authoring, and Toolbox progress handoff | repo-served Game Design page; repo-served Toolbox Progress and Build Path views; in-memory SQL-shaped Game Design mock repository; Project Workspace mock project context |
+| game-design | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Game Design mock repository, project purpose flow, validation overlay, capability demo authoring, and Toolbox progress handoff | repo-served Game Design page; repo-served Toolbox Progress and Build Path views; in-memory SQL-shaped Game Design mock repository; Project Workspace mock project context |
 | game-configuration | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Game Configuration mock repository, Game Design handoff, configuration validation, user-facing output, and Toolbox progress handoff | repo-served Game Configuration page; repo-served Game Design page for handoff checks; repo-served Toolbox Progress and Build Path views; in-memory SQL-shaped Game Configuration mock repository; Game Design mock repository handoff |
 | build-path | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Toolbox Build Path simplification, workflow status table, and Admin Tools Progress navigation | repo-served Toolbox page; repo-served Admin Tools Progress page; Project Workspace mock project context; Toolbox role simulation |
 | tools-progress | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Admin Tools Progress hydration, Toolbox Group view color model, and Project Build Path separation | repo-served Admin Tools Progress page; repo-served Toolbox Group view; Toolbox registry build sequence; Project Build Path workflow table |
 | tool-navigation | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Admin Tools Progress tool route links, Tool Display Mode build-order previous/next controls, and Toolbox group fallback routing | repo-served Admin Tools Progress page; repo-served Project Workspace, Game Design, and Game Configuration tool pages; repo-served Toolbox Group view with URL-selected accordion; Toolbox registry build sequence and route metadata |
-| tool-display-mode | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Tool Display Mode identity row, registry-owned previous/next links, disabled text fallback, and multi-path group routing | repo-served Project Workspace, Game Design, Game Configuration, and AI Assistant tool pages; repo-served Toolbox Group view with URL-selected accordion; Toolbox registry build sequence and route metadata; shared Theme V2 Tool Display Mode script |
+| tool-display-mode | PASS | 18.48s | 1 | Tool Display Mode validates the two-row identity/navigation layout, anchors for previous/next targets, disabled text for missing targets, registry build-order labels, role preservation, and multi-path fallback without exercising unrelated toolbox routes. | Tool Display Mode identity row, registry-owned previous/next links, disabled text fallback, and multi-path group routing | repo-served Project Workspace, Game Design, Game Configuration, and AI Assistant tool pages; repo-served Toolbox Group view with URL-selected accordion; Toolbox registry build sequence and route metadata; shared Theme V2 Tool Display Mode script |
 | tool-images | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Toolbox registry image contract, Toolbox card image rendering, and Tool Display Mode image fallback | Toolbox registry badge/tool image contract; repo-served Toolbox page; repo-served representative Toolbox tool pages; shared registry image fallback |
 | tool-runtime | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Active public toolbox and Tool Template V2 contract | repo-served root toolbox page; Tool Template V2 public page; Theme V2 shared partials and assets |
 | game-runtime | SKIP | 0ms | 0 | Lane was not selected for this targeted run. | Deprecated archive/v1-v2/games reference coverage |  |
@@ -124,10 +124,11 @@ Prevented Workspace lane reruns: 0
 
 | Lane | Duration | Test |
 | --- | --- | --- |
-| game-design | 3.70s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:218:1 > Toolbox Build Path view shows the Game Design handoff |
-| game-design | 2.10s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:80:1 > Game Design saves and updates design fields against the active project |
-| game-design | 1.80s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:55:1 > Game Design shows an actionable overlay when project context is missing |
-| game-design | 1.50s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:192:1 > Game Design authors capability demos as Project Workspace projects |
+| tool-display-mode | 4.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:211:1 > multi-path fallback opens Toolbox Group view with only the target group expanded |
+| tool-display-mode | 2.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:143:1 > Project Workspace and Game Configuration use registry order without page hardcoding |
+| tool-display-mode | 1.60s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:116:1 > Game Design renders identity and navigation rows with registry anchor links |
+| tool-display-mode | 1.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:168:1 > missing previous target renders disabled text instead of a broken link |
+| tool-display-mode | 1.30s | tests\playwright\tools\ToolDisplayModeNavigation.spec.mjs:186:1 > Build Game renders plain previous and next links in the second row |
 
 ## Commands
 
@@ -138,7 +139,7 @@ Prevented Workspace lane reruns: 0
 - SKIP
 
 ### game-design
-- PASS 16.48s C:\nvm4w\nodejs\node.exe C:\Users\davidq\Documents\GitHub\HTML-JavaScript-Gaming\node_modules\@playwright\test\cli.js test tests/playwright/tools/GameDesignMockRepository.spec.mjs --project=playwright --workers=1 --reporter=list
+- SKIP
 
 ### game-configuration
 - SKIP
@@ -153,7 +154,7 @@ Prevented Workspace lane reruns: 0
 - SKIP
 
 ### tool-display-mode
-- SKIP
+- PASS 18.48s C:\nvm4w\nodejs\node.exe C:\Users\davidq\Documents\GitHub\HTML-JavaScript-Gaming\node_modules\@playwright\test\cli.js test tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs --project=playwright --workers=1 --reporter=list
 
 ### tool-images
 - SKIP

docs_build/dev/reports/tool-display-mode-layout-fix-report.md

@@ -0,0 +1,39 @@
+# PR_26156_122 Tool Display Mode Layout Fix Report
+
+## Scope
+
+- Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` first.
+- Updated shared Tool Display Mode styling under `assets/theme-v2/css/panels.css`.
+- Updated targeted Tool Display Mode Playwright/MSJ coverage.
+- Did not modify individual tool content.
+- Did not modify Tool Display Mode JavaScript.
+- Did not modify `start_of_day`.
+
+## Layout Changes
+
+- Set `.tool-display-mode__badge` to render at `64px` by `64px`.
+- Set `.tool-display-mode__character` to render at `225px` by `127px`.
+- Changed `.tool-display-mode__body` to a reusable Theme V2 grid layout.
+- Kept the character image in the left column.
+- Placed `.tool-display-mode__description` to the right of the character image.
+- Placed `.tool-display-mode__navigation-row` below the description area in the right column.
+- Preserved the existing generated DOM and previous/next link behavior.
+
+## Validation Notes
+
+- Impacted lane: `tool-display-mode`.
+- Skipped lanes: all other lanes, because this PR only changes shared Tool Display Mode CSS and targeted Tool Display Mode layout assertions.
+- Ran `node --check tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs`.
+- Ran `npm run test:lane:tool-display-mode`.
+- Ran scoped `git diff --check` for changed implementation/test/report files.
+- Ran changed-file static validation confirming no inline styles, style blocks, inline scripts, inline event handlers, or `start_of_day` file changes were introduced.
+- Full samples smoke: skipped by request.
+
+## Manual Test Notes
+
+- Verified by targeted Playwright that badge display size is `64x64`.
+- Verified by targeted Playwright that character display size is `225x127`.
+- Verified description renders to the right of the character image.
+- Verified Previous/Next navigation renders below the description area, aligned with the description column.
+- Verified previous/next controls remain anchors, not buttons.
+- Verified no console errors or failed page requests in the targeted lane.

tests/playwright/tools/ToolDisplayModeNavigation.spec.mjs

@@ -78,6 +78,41 @@ async function toolDisplayRows(page) {
   ));
 }
 
+async function expectToolDisplayModeVisualLayout(page) {
+  const layout = await page.locator("#toolDisplayMode").evaluate((displayMode) => {
+    const badge = displayMode.querySelector(".tool-display-mode__badge");
+    const character = displayMode.querySelector(".tool-display-mode__character");
+    const description = displayMode.querySelector(".tool-display-mode__description");
+    const navigation = displayMode.querySelector(".tool-display-mode__navigation-row");
+    const badgeBox = badge.getBoundingClientRect();
+    const characterBox = character.getBoundingClientRect();
+    const descriptionBox = description.getBoundingClientRect();
+    const navigationBox = navigation.getBoundingClientRect();
+
+    return {
+      badgeHeight: Math.round(badgeBox.height),
+      badgeWidth: Math.round(badgeBox.width),
+      characterHeight: Math.round(characterBox.height),
+      characterWidth: Math.round(characterBox.width),
+      descriptionRightOfCharacter: descriptionBox.left >= characterBox.right,
+      navigationAlignedWithDescription: Math.abs(navigationBox.left - descriptionBox.left) <= 2,
+      navigationBelowDescription: navigationBox.top >= descriptionBox.bottom,
+      navigationRightOfCharacter: navigationBox.left >= characterBox.right
+    };
+  });
+
+  expect(layout).toEqual({
+    badgeHeight: 64,
+    badgeWidth: 64,
+    characterHeight: 127,
+    characterWidth: 225,
+    descriptionRightOfCharacter: true,
+    navigationAlignedWithDescription: true,
+    navigationBelowDescription: true,
+    navigationRightOfCharacter: true
+  });
+}
+
 test("Game Design renders identity and navigation rows with registry anchor links", async ({ page }) => {
   const failures = await openRepoPage(page, "/toolbox/game-design/index.html?role=user");
 
@@ -97,6 +132,7 @@ test("Game Design renders identity and navigation rows with registry anchor link
     await expect(next).toHaveText("Next: Game Configuration");
     await expect(next).toHaveAttribute("href", "toolbox/game-configuration/index.html?role=user");
     await expectPlainNavigationLinks(page);
+    await expectToolDisplayModeVisualLayout(page);
     await expectNoPageFailures(failures);
   } finally {
     await workspaceV2CoverageReporter.stop(page);
@@ -164,6 +200,7 @@ test("Build Game renders plain previous and next links in the second row", async
     await expect(next).toHaveText("Next: Game Testing");
     await expect(next).toHaveAttribute("href", "toolbox/game-testing/index.html?role=user");
     await expectPlainNavigationLinks(page);
+    await expectToolDisplayModeVisualLayout(page);
     await expectNoPageFailures(failures);
   } finally {
     await workspaceV2CoverageReporter.stop(page);