Move Session Inspector V2 detail scrollbars onto output pre elements - PR_26128_024-session-inspector-v2-output-scrollbars

Author: DavidQ

docs/dev/reports/playwright_session_inspector_v2_output_scrollbars.md

@@ -0,0 +1,21 @@
+# Playwright Session Inspector V2 Output Scrollbars
+
+## Command
+`npm run test:workspace-v2`
+
+## Result
+- Passed: 15/15
+- Runtime: about 1.5 minutes
+
+## Targeted Coverage
+- Verified `#sessionInspectorV2JsonOutput` scrolls vertically and horizontally with long JSON content.
+- Verified `#sessionInspectorV2DataOutput` scrolls vertically and horizontally with long Data content.
+- Verified `#sessionInspectorV2DirtyOutput` scrolls vertically and horizontally when Dirty content overflows.
+- Verified JSON/Data/Dirty accordion content wrappers do not own the primary scrollbars.
+- Verified JSON/Data/Dirty output heights remain bounded.
+- Verified Dirty and Status headers remain visible/reachable.
+- Verified Copy All still copies the JSON/Data/Dirty payload.
+- Verified Dirty header values remain covered for false, true, and unknown states.
+
+## Skipped
+- Full samples smoke test was skipped by request. The relevant output scrollbar, detail panel, Dirty header, and Copy All coverage is in `tests/playwright/tools/WorkspaceManagerV2.spec.mjs`.

docs/dev/reports/session_inspector_v2_output_scrollbars.md

@@ -0,0 +1,41 @@
+# Session Inspector V2 Output Scrollbars
+
+## Scope
+- Moved Session Inspector V2 detail scrolling onto the output `<pre>` elements.
+- Ensured these outputs own their vertical and horizontal scroll behavior:
+  - `#sessionInspectorV2JsonOutput`
+  - `#sessionInspectorV2DataOutput`
+  - `#sessionInspectorV2DirtyOutput`
+- Kept JSON/Data/Dirty accordion containers bounded so long content does not hide lower headers.
+
+## Implementation Notes
+- Detail accordion content wrappers now hide overflow instead of owning the primary scrollbars.
+- JSON/Data/Dirty output `<pre>` elements use internal scrolling and preserve unwrapped text for horizontal overflow.
+- Dirty and Status headers remain visible/reachable with long JSON/Data content.
+
+## Preserved Behavior
+- Dirty header values remain:
+  - `Dirty: false`
+  - `Dirty: true`
+  - `Dirty: unknown`
+- Copy All still copies the labeled JSON/Data/Dirty payload.
+- Clear Status behavior was preserved.
+- JSON/Data/Dirty/Status accordion behavior was preserved.
+- Normalized session object shape was not changed.
+
+## Guardrails
+- No cross-tool communication was added.
+- No sample JSON was modified.
+- No roadmap content was modified.
+
+## Validation
+- Passed `npm run test:workspace-v2` with 15/15 tests.
+- Verified JSON scrollbar ownership is inside `#sessionInspectorV2JsonOutput`.
+- Verified Data scrollbar ownership is inside `#sessionInspectorV2DataOutput`.
+- Verified Dirty scrollbar ownership is inside `#sessionInspectorV2DirtyOutput` when Dirty content overflows.
+- Verified accordion containers do not grow uncontrollably.
+- Verified Dirty and Status headers remain visible/reachable.
+- Verified Copy All still works.
+
+## Skipped
+- Full samples smoke test was skipped by request. The changed surface is Session Inspector V2 output scrolling and is covered by `npm run test:workspace-v2`.

tests/playwright/tools/WorkspaceManagerV2.spec.mjs

@@ -745,6 +745,7 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           source: "test-fixture"
         }];
       }));
+      const longHorizontalToken = "session-inspector-v2-horizontal-scroll-probe".repeat(8);
       window.sessionStorage.setItem("workspace.tools.preview-generator-v2", JSON.stringify({
         schema: {
           source: "workspace-manager-v2",
@@ -785,7 +786,10 @@ test.describe("Workspace Manager V2 bootstrap", () => {
           assetsPath: "games/Asteroids/assets",
           repoReferenceKey: "workspace.repo.reference"
         },
-        data: { assets: { "assets.image.preview.preview": { path: "assets/images/preview.png" }, ...longAssetMap } },
+        data: {
+          assets: { "assets.image.preview.preview": { path: "assets/images/preview.png" }, ...longAssetMap },
+          horizontalProbe: longHorizontalToken
+        },
         dirty: {
           isDirty: false,
           reason: null,
@@ -809,9 +813,9 @@ test.describe("Workspace Manager V2 bootstrap", () => {
         },
         dirty: {
           isDirty: true,
-          reason: "test dirty flag",
+          reason: longHorizontalToken,
           changedAt: "2026-05-08T12:00:00.000Z",
-          changedKeys: ["data.note"]
+          changedKeys: Array.from({ length: 70 }, (_, index) => `${longHorizontalToken}.${index}`)
         }
       }));
       window.sessionStorage.setItem("workspace.tools.no-data-test", JSON.stringify({
@@ -891,28 +895,40 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       const detailPanelState = await page.evaluate(() => {
         const jsonContent = document.querySelector("#sessionInspectorV2JsonContent");
         const dataContent = document.querySelector("#sessionInspectorV2DataContent");
+        const jsonOutput = document.querySelector("#sessionInspectorV2JsonOutput");
+        const dataOutput = document.querySelector("#sessionInspectorV2DataOutput");
         const dirtyHeader = document.querySelector(".session-inspector-v2__dirty-accordion-header");
         const statusHeader = document.querySelector(".session-inspector-v2__status-accordion-header");
         const rightPanel = document.querySelector(".session-inspector-v2__panel--right");
+        const jsonContentStyle = getComputedStyle(jsonContent);
+        const dataContentStyle = getComputedStyle(dataContent);
         const rectFor = (element) => element.getBoundingClientRect();
         const rightRect = rectFor(rightPanel);
         const dirtyHeaderRect = rectFor(dirtyHeader);
         const statusHeaderRect = rectFor(statusHeader);
         return {
-          dataContentScrolls: dataContent.scrollHeight > dataContent.clientHeight + 1,
-          dataHeightBounded: rectFor(dataContent).height <= 170,
+          dataContentDoesNotOwnScrollbar: dataContentStyle.overflowY === "hidden" && dataContentStyle.overflowX === "hidden",
+          dataOutputScrollsHorizontally: dataOutput.scrollWidth > dataOutput.clientWidth + 1,
+          dataOutputScrollsVertically: dataOutput.scrollHeight > dataOutput.clientHeight + 1,
+          dataOutputHeightBounded: rectFor(dataOutput).height <= 170,
           dirtyHeaderReachable: dirtyHeaderRect.top >= rightRect.top && dirtyHeaderRect.bottom <= rightRect.bottom,
-          jsonContentScrolls: jsonContent.scrollHeight > jsonContent.clientHeight + 1,
-          jsonHeightBounded: rectFor(jsonContent).height <= 170,
+          jsonContentDoesNotOwnScrollbar: jsonContentStyle.overflowY === "hidden" && jsonContentStyle.overflowX === "hidden",
+          jsonOutputScrollsHorizontally: jsonOutput.scrollWidth > jsonOutput.clientWidth + 1,
+          jsonOutputScrollsVertically: jsonOutput.scrollHeight > jsonOutput.clientHeight + 1,
+          jsonOutputHeightBounded: rectFor(jsonOutput).height <= 170,
           statusHeaderReachable: statusHeaderRect.top >= rightRect.top && statusHeaderRect.bottom <= rightRect.bottom
         };
       });
       expect(detailPanelState).toEqual({
-        dataContentScrolls: true,
-        dataHeightBounded: true,
+        dataContentDoesNotOwnScrollbar: true,
+        dataOutputScrollsHorizontally: true,
+        dataOutputScrollsVertically: true,
+        dataOutputHeightBounded: true,
         dirtyHeaderReachable: true,
-        jsonContentScrolls: true,
-        jsonHeightBounded: true,
+        jsonContentDoesNotOwnScrollbar: true,
+        jsonOutputScrollsHorizontally: true,
+        jsonOutputScrollsVertically: true,
+        jsonOutputHeightBounded: true,
         statusHeaderReachable: true
       });
       await page.locator("#copySessionInspectorV2AllButton").click();
@@ -930,6 +946,24 @@ test.describe("Workspace Manager V2 bootstrap", () => {
       await page.locator('[data-session-inspector-v2-entry-id="sessionStorage:workspace.tools.dirty-test"]').click();
       await expect(page.locator("#sessionInspectorV2DirtyHeaderValue")).toHaveText("Dirty: true");
       await expect(page.locator("#sessionInspectorV2DirtyOutput")).toContainText('"isDirty": true');
+      const dirtyOutputScrollState = await page.evaluate(() => {
+        const dirtyContent = document.querySelector("#sessionInspectorV2DirtyContent");
+        const dirtyOutput = document.querySelector("#sessionInspectorV2DirtyOutput");
+        const dirtyContentStyle = getComputedStyle(dirtyContent);
+        const rect = dirtyOutput.getBoundingClientRect();
+        return {
+          dirtyContentDoesNotOwnScrollbar: dirtyContentStyle.overflowY === "hidden" && dirtyContentStyle.overflowX === "hidden",
+          dirtyOutputScrollsHorizontally: dirtyOutput.scrollWidth > dirtyOutput.clientWidth + 1,
+          dirtyOutputScrollsVertically: dirtyOutput.scrollHeight > dirtyOutput.clientHeight + 1,
+          dirtyOutputHeightBounded: rect.height <= 170
+        };
+      });
+      expect(dirtyOutputScrollState).toEqual({
+        dirtyContentDoesNotOwnScrollbar: true,
+        dirtyOutputScrollsHorizontally: true,
+        dirtyOutputScrollsVertically: true,
+        dirtyOutputHeightBounded: true
+      });
       await page.locator('[data-session-inspector-v2-entry-id="sessionStorage:workspace.tools.no-data-test"]').click();
       await expect(page.locator("#sessionInspectorV2DataOutput")).toContainText("No data section is present for sessionStorage:workspace.tools.no-data-test.");
       await page.locator('[data-session-inspector-v2-entry-id="sessionStorage:workspace.tools.no-dirty-test"]').click();

tools/session-inspector-v2/styles/sessionInspectorV2.css

@@ -173,8 +173,9 @@ button:hover {
 }
 
 .session-inspector-v2__accordion--detail.is-open {
-  flex: 1 1 0;
+  flex: 0 1 auto;
   min-height: 0;
+  max-height: clamp(126px, 24vh, 190px);
 }
 
 .session-inspector-v2__accordion--detail-scroll.is-open {
@@ -245,17 +246,21 @@ button:hover {
 }
 
 .session-inspector-v2__detail-scroll-content {
-  max-height: clamp(86px, 17vh, 142px);
-  overflow: auto;
+  overflow: hidden;
 }
 
-.session-inspector-v2__accordion--detail .session-inspector-v2__output {
-  min-height: 0;
+.session-inspector-v2__accordion--detail > .accordion-v2__content {
+  overflow: hidden;
 }
 
-.session-inspector-v2__detail-scroll-content > .session-inspector-v2__output {
-  flex: 0 0 auto;
-  overflow: visible;
+.session-inspector-v2__accordion--detail .session-inspector-v2__output {
+  flex: 1 1 auto;
+  max-height: clamp(86px, 17vh, 142px);
+  min-height: 0;
+  overflow: auto;
+  overflow-wrap: normal;
+  white-space: pre;
+  word-break: normal;
 }
 
 .session-inspector-v2__actions {