Standardize tool form table layout width behavior - PR_26156_121-tool-form-table-layout-standard

Author: ToolboxAid

assets/theme-v2/css/tables.css

@@ -35,3 +35,25 @@ td {
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-brand)
 }
+
+.tool-form-table {
+  width: 100%
+}
+
+.tool-form-table th[scope="row"] {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+  vertical-align: top
+}
+
+.tool-form-table td {
+  width: auto
+}
+
+.tool-form-table input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
+.tool-form-table textarea,
+.tool-form-table select {
+  box-sizing: border-box;
+  width: 100%
+}

docs_build/dev/codex_commands.md

@@ -671,3 +671,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_121
+
+Changes:
+- Read `docs_build/dev/PROJECT_INSTRUCTIONS.md`.
+- Added reusable `.tool-form-table` Theme V2 CSS in `assets/theme-v2/css/tables.css`.
+- Updated `toolbox/game-design/index.html` Project Design table to opt into `data-table tool-form-table`.
+- Kept Project Design labels compact and right-aligned through the reusable Theme V2 table pattern.
+- Kept Project Design input controls stretching across the available input column through the reusable Theme V2 table pattern.
+- Set both Project Design textarea controls to `rows="4"`.
+- Added targeted Game Design Playwright/MSJ coverage for layout width, compact/right-aligned labels, input-column fill, and textarea rows.
+- Did not add inline styles, style blocks, script blocks, inline event handlers, page-local CSS, or tool-local CSS.
+- Did not modify unrelated Game Design sections.
+- Did not modify `start_of_day`.
+
+Validation:
+- `node --check tests/playwright/tools/GameDesignMockRepository.spec.mjs`
+- `npm run test:lane:game-design`
+- 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-form-table-layout-standard-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 @@
-Convert Game Design Project Design form to Theme V2 table - PR_26156_120-game-design-project-design-table
+Add reusable Theme V2 tool form table layout - PR_26156_121-tool-form-table-layout-standard

docs_build/dev/reports/testing_lane_execution_report.md

@@ -1,6 +1,6 @@
 # Testing Lane Execution Report
 
-Generated: 2026-06-05T12:57:13.655Z
+Generated: 2026-06-05T13:05:49.934Z
 Dry run: No
 
 ## Summary
@@ -9,7 +9,7 @@ PASS: 1
 WARN: 0
 FAIL: 0
 SKIP: 13
-Total lane elapsed time: 15.67s
+Total lane elapsed time: 16.48s
 Actual browser launches: 1
 
 ## Full Samples Smoke
@@ -107,7 +107,7 @@ 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 | 15.67s | 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 | 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-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 |
@@ -124,10 +124,10 @@ Prevented Workspace lane reruns: 0
 
 | Lane | Duration | Test |
 | --- | --- | --- |
-| game-design | 3.20s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:185:1 > Toolbox Build Path view shows the Game Design handoff |
-| game-design | 2.00s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:80:1 > Game Design saves and updates design fields against the active project |
-| game-design | 1.70s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:55:1 > Game Design shows an actionable overlay when project context is missing |
-| game-design | 1.60s | tests\playwright\tools\GameDesignMockRepository.spec.mjs:159:1 > Game Design authors capability demos as Project Workspace projects |
+| 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 |
 
 ## Commands
 
@@ -138,7 +138,7 @@ Prevented Workspace lane reruns: 0
 - SKIP
 
 ### game-design
-- PASS 15.67s 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
+- 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
 
 ### game-configuration
 - SKIP

docs_build/dev/reports/tool-form-table-layout-standard-report.md

@@ -0,0 +1,48 @@
+# PR_26156_121 Tool Form Table Layout Standard Report
+
+## Scope
+
+- Read `docs_build/dev/PROJECT_INSTRUCTIONS.md` first.
+- Updated `toolbox/game-design/index.html` Design Fields > Project Design form layout only.
+- Promoted the missing table/form behavior into reusable Theme V2 CSS under `assets/theme-v2/css/tables.css`.
+- Updated targeted Game Design Playwright/MSJ coverage for the reusable layout class and browser-measured layout behavior.
+- Did not modify unrelated Game Design sections.
+- Did not modify `start_of_day`.
+
+## Reusable Theme V2 Pattern
+
+- Added `.tool-form-table` as an opt-in table/form pattern for tool pages.
+- The reusable expectation for all tools is:
+  - form tables use available panel width
+  - row-header label cells stay compact
+  - row-header labels align right
+  - input cells fill remaining table width
+  - select, textarea, and non-special input controls stretch to the available input-column width
+- The class is opt-in and does not change existing `.data-table` behavior unless a table also declares `.tool-form-table`.
+
+## Game Design Changes
+
+- Updated Project Design table class from `data-table` to `data-table tool-form-table`.
+- Set `gameDesignCapabilityNotes` from `rows="3"` to `rows="4"`.
+- Kept `gameDesignSummary` at `rows="4"`.
+- Preserved existing field names, control IDs, data hooks, labels, validation hooks, values, and form behavior.
+
+## Validation Notes
+
+- Impacted lane: `game-design`.
+- Shared Theme V2 CSS changed, but the new CSS is opt-in and only `toolbox/game-design/index.html` consumes it in this PR.
+- Skipped lanes: all other lanes, because no existing global table behavior was changed and no other tool opted into `.tool-form-table`.
+- Ran `node --check tests/playwright/tools/GameDesignMockRepository.spec.mjs`.
+- Ran `npm run test:lane:game-design`.
+- Ran scoped `git diff --check` for changed implementation/test/report files.
+- Ran a changed-file static scan 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 Project Design uses `.tool-form-table`.
+- Verified the table width uses the available wrapper/panel width.
+- Verified the label column is compact and computed `text-align` is `right`.
+- Verified the select and textarea controls stretch across the input column.
+- Verified both Project Design textarea controls expose `rows="4"`.
+- Verified existing form controls still accept input and Save Game Design still updates the active project.

tests/playwright/tools/GameDesignMockRepository.spec.mjs

@@ -91,6 +91,7 @@ test("Game Design saves and updates design fields against the active project", a
     const projectDesignTable = page.locator("[data-game-design-project-design-table]");
     await expect(projectDesignTable).toBeVisible();
     await expect(projectDesignTable).toHaveClass(/data-table/);
+    await expect(projectDesignTable).toHaveClass(/tool-form-table/);
     await expect(projectDesignTable.locator("tbody tr")).toHaveCount(5);
     await expect(projectDesignTable.locator("th[scope='row'] label")).toHaveText([
       "Game Type",
@@ -117,6 +118,38 @@ test("Game Design saves and updates design fields against the active project", a
       { cellCount: 2, controlId: "gameDesignSummary", controlTag: "textarea", labelFor: "gameDesignSummary", labelText: "Design Summary" },
       { cellCount: 2, controlId: "gameDesignCapabilityNotes", controlTag: "textarea", labelFor: "gameDesignCapabilityNotes", labelText: "Capability Demo Notes" }
     ]);
+    await expect(page.locator("#gameDesignSummary")).toHaveAttribute("rows", "4");
+    await expect(page.locator("#gameDesignCapabilityNotes")).toHaveAttribute("rows", "4");
+    const projectDesignLayout = await projectDesignTable.evaluate((table) => {
+      const wrapper = table.closest(".table-wrapper");
+      const firstRow = table.querySelector("tbody tr");
+      const labelCell = firstRow?.querySelector("th");
+      const inputCell = firstRow?.querySelector("td");
+      const select = firstRow?.querySelector("select");
+      const textarea = table.querySelector("textarea");
+      const tableBox = table.getBoundingClientRect();
+      const wrapperBox = wrapper?.getBoundingClientRect();
+      const labelBox = labelCell?.getBoundingClientRect();
+      const inputBox = inputCell?.getBoundingClientRect();
+      const selectBox = select?.getBoundingClientRect();
+      const textareaBox = textarea?.getBoundingClientRect();
+      return {
+        controlColumnIsDominant: Boolean(labelBox && inputBox && inputBox.width > labelBox.width),
+        labelColumnIsCompact: Boolean(labelBox && tableBox && labelBox.width < tableBox.width * 0.4),
+        labelTextAlign: labelCell ? getComputedStyle(labelCell).textAlign : "",
+        selectFillsInputColumn: Boolean(selectBox && inputBox && selectBox.width >= inputBox.width - 32),
+        tableUsesWrapperWidth: Boolean(tableBox && wrapperBox && tableBox.width >= wrapperBox.width - 2),
+        textareaFillsInputColumn: Boolean(textareaBox && inputBox && textareaBox.width >= inputBox.width - 32)
+      };
+    });
+    expect(projectDesignLayout).toEqual({
+      controlColumnIsDominant: true,
+      labelColumnIsCompact: true,
+      labelTextAlign: "right",
+      selectFillsInputColumn: true,
+      tableUsesWrapperWidth: true,
+      textareaFillsInputColumn: true
+    });
     await expect(page.locator("[data-game-design-output] pre, [data-game-design-output] code")).toHaveCount(0);
     await expect(page.locator("[data-game-design-output]")).toContainText("Design Summary");
     await expect(page.locator("[data-game-design-output]")).toContainText("Validation Status");

toolbox/game-design/index.html

@@ -71,7 +71,7 @@ <h3>Project Design</h3>
                                 </div>
                                 <form class="content-stack" data-game-design-form>
                                     <div class="table-wrapper">
-                                        <table class="data-table" aria-label="Project Design fields" data-game-design-project-design-table>
+                                        <table class="data-table tool-form-table" aria-label="Project Design fields" data-game-design-project-design-table>
                                             <tbody>
                                                 <tr>
                                                     <th scope="row"><label for="gameDesignType">Game Type</label></th>
@@ -91,7 +91,7 @@ <h3>Project Design</h3>
                                                 </tr>
                                                 <tr>
                                                     <th scope="row"><label for="gameDesignCapabilityNotes">Capability Demo Notes</label></th>
-                                                    <td><textarea id="gameDesignCapabilityNotes" rows="3" data-game-design-capability-notes placeholder="Optional notes when this project demonstrates a specific capability."></textarea></td>
+                                                    <td><textarea id="gameDesignCapabilityNotes" rows="4" data-game-design-capability-notes placeholder="Optional notes when this project demonstrates a specific capability."></textarea></td>
                                                 </tr>
                                             </tbody>
                                         </table>