Fix Tool Vote fullscreen scrolling behavior - PR_26160_067-admin-tool-vote-template-conversion

Author: ToolboxAid

assets/theme-v2/css/layout.css

@@ -283,34 +283,63 @@ body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .footer {
 }
 
 body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh
+  --tool-focus-header-reserve: var(--space-78);
+  --tool-focus-footer-reserve: calc(var(--space-78) + var(--space-78));
+  min-height: 100vh;
+  padding-block: var(--tool-focus-header-reserve) var(--tool-focus-footer-reserve)
+}
+
+body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .site-header {
+  inset-block-start: var(--space-0);
+  inset-inline: var(--space-0);
+  max-height: var(--tool-focus-header-reserve);
+  overflow: visible;
+  position: fixed;
+  z-index: var(--z-index-lg)
+}
+
+body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .footer {
+  inset-block-end: var(--space-0);
+  inset-inline: var(--space-0);
+  margin-top: var(--space-0);
+  max-height: var(--tool-focus-footer-reserve);
+  overflow: auto;
+  padding-block: var(--space-10);
+  position: fixed;
+  z-index: var(--z-index-lg)
 }
 
 body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) main {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  min-height: var(--space-0)
+  height: calc(100vh - var(--tool-focus-header-reserve) - var(--tool-focus-footer-reserve));
+  min-height: var(--space-0);
+  overflow: hidden
 }
 
 body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .section {
   display: flex;
   flex: 1 1 auto;
   min-height: var(--space-0);
+  overflow: hidden;
   padding: var(--space-8) var(--space-0)
 }
 
 body.tool-focus-mode:has(.tool-workspace--fullscreen-chrome) .section>.container {
   display: flex;
   flex: 1 1 auto;
-  min-height: var(--space-0)
+  height: 100%;
+  max-height: 100%;
+  min-height: var(--space-0);
+  overflow: hidden
 }
 
 body.tool-focus-mode .tool-workspace--fullscreen-chrome {
+  flex: 1 1 auto;
   height: 100%;
   max-height: 100%;
+  min-height: var(--space-0);
   width: 100%
 }
 
@@ -330,7 +359,8 @@ body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-center-panel {
 body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-region {
   flex: 1 1 auto;
   min-height: var(--space-0);
-  overflow: auto
+  overflow: auto;
+  overscroll-behavior: contain
 }
 
 .account-panel {

docs_build/dev/reports/admin-tool-vote-template-conversion-report.md

@@ -12,8 +12,12 @@
 | --- | --- | --- |
 | Convert Admin > Tool Votes from standalone page into Tool Template V2-based admin tool. | `admin/tool-votes.html` now uses `container--tool-wide`, `tool-workspace tool-workspace--wide`, left/right `tool-column` panels, `tool-center-panel`, and `tool-display-mode.js`. | PASS |
 | Preserve Admin placement and left-column Admin navigation. | Left Admin Tools accordion keeps Tool Votes, Environments, Users, Game Migration, and Platform Settings with Tool Votes active. | PASS |
-| Fullscreen keeps header and footer visible. | Reusable `tool-workspace--fullscreen-chrome` rules in `assets/theme-v2/css/layout.css`; Playwright asserts `header.site-header` and `footer.footer` visible in focus mode. | PASS |
-| In fullscreen, only the data/table area should scroll. | Reusable `tool-workspace--table-scroll-focus` plus `tool-table-scroll-region`; Playwright asserts side/center panels are hidden overflow and table region owns `overflow-y:auto`. | PASS |
+| Fullscreen keeps header visible and fixed at top. | Reusable `tool-workspace--fullscreen-chrome` rules in `assets/theme-v2/css/layout.css`; Playwright asserts `header.site-header` is visible, `position: fixed`, and top-aligned at `0`. | PASS |
+| Fullscreen keeps footer visible and fixed at bottom. | Playwright asserts `footer.footer` is visible, `position: fixed`, bottom-aligned inside the viewport, and has its own `overflow-y:auto` when content needs a footer scrollbar. | PASS |
+| Fullscreen does not scroll the entire page. | Playwright asserts `document.body` keeps `overflow-y:hidden` and page scroll position does not change during table scroll testing. | PASS |
+| In fullscreen, only the data/table area should scroll vertically. | Reusable `tool-workspace--table-scroll-focus` plus `tool-table-scroll-region`; Playwright injects additional table rows, scrolls the table region, and verifies side/center panels remain hidden overflow. | PASS |
+| Preserve horizontal scrolling for wide Tool Vote tables. | Playwright verifies the table wrapper is horizontally scrollable and `scrollLeft` moves for the wide table. | PASS |
+| Verify Tool Vote table remains usable with large tool counts. | Playwright clones 90 extra rows in the test DOM, verifies vertical scrolling is owned by `data-toolbox-votes-scroll-region`, and keeps the body locked. | PASS |
 | Remove old page-specific table width controls. | Removed Expand Table Width, Standard table width, and old `data-toolbox-votes-expanded` CSS. Static search found no active page/script/CSS matches. | PASS |
 | Remove old selected metadata controls. | Removed Selected Order, Selected Group, Selected Path, Group field, Path field, Status field, and Update Metadata from HTML/JS. Static search found no active page/script/CSS matches. | PASS |
 | Keep table rows, votes, ordering, sorting, and tool links. | `admin/tool-votes.js` preserves row rendering, vote columns, drag/drop ordering, sort buttons, and tool link cells; Playwright verified row links, sorting, and drag/drop reorder. | PASS |
@@ -28,9 +32,7 @@
 Targeted Admin Tool Vote validation only:
 - `node --check admin/tool-votes.js`
 - `node --check tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs`
-- `node --check tests/playwright/tools/ToolboxRoutePages.spec.mjs`
 - `npx playwright test tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs --grep "Tool Votes"`
-- `npx playwright test tests/playwright/tools/ToolboxRoutePages.spec.mjs --grep "toolbox status kickers"`
 - `git diff --check`
 - Static `rg` checks for removed controls and inline script/style/event handlers
 
@@ -40,4 +42,4 @@ Full samples validation was skipped as requested. No samples, shared sample load
 
 ## Manual Test Notes
 
-The targeted Playwright lane verified the converted Tool Template V2 structure, Admin navigation, fullscreen chrome/table-scroll behavior, removed controls, editable State, sorting, ordering, and tool links. It also verified State edits flow into Toolbox Build Path through the existing DB-backed metadata source.
+The targeted Playwright lane verified the converted Tool Template V2 structure, Admin navigation, fixed fullscreen header/footer, footer scrollbar access, locked page scrolling, independent vertical table scrolling with large row counts, horizontal table scrolling, and removed controls. Earlier PR_26160_067 validation also verified editable State, sorting, ordering, tool links, and State edits flowing into Toolbox Build Path through the existing DB-backed metadata source.

tests/playwright/tools/AdminPlatformToolsWireframes.spec.mjs

@@ -139,21 +139,68 @@ test("Tool Votes side menu includes Admin platform wireframes", async ({ page })
       const center = workspace.querySelector("[data-toolbox-votes-panel]");
       const right = workspace.querySelector(".tool-column:last-of-type");
       const scrollRegion = workspace.querySelector("[data-toolbox-votes-scroll-region]");
+      const header = document.querySelector("header.site-header");
+      const footer = document.querySelector("footer.footer");
+      const bodyScrollBefore = document.scrollingElement?.scrollTop || 0;
+      const tableBody = scrollRegion?.querySelector("tbody");
+      const sourceRow = tableBody?.querySelector("tr");
+      if (tableBody && sourceRow) {
+        for (let index = 0; index < 90; index += 1) {
+          const clone = sourceRow.cloneNode(true);
+          clone.dataset.toolboxVotesLargeCountRow = String(index + 1);
+          tableBody.append(clone);
+        }
+      }
+      if (scrollRegion) {
+        scrollRegion.scrollTop = scrollRegion.scrollHeight;
+        scrollRegion.scrollLeft = scrollRegion.scrollWidth;
+      }
+      if (footer) {
+        footer.scrollTop = footer.scrollHeight;
+      }
+      const headerBox = header?.getBoundingClientRect();
+      const footerBox = footer?.getBoundingClientRect();
       return {
         bodyOverflowY: getComputedStyle(document.body).overflowY,
+        bodyScrollAfter: document.scrollingElement?.scrollTop || 0,
+        bodyScrollBefore,
         centerOverflowY: center ? getComputedStyle(center).overflowY : "",
+        footerBottom: footerBox ? Math.round(footerBox.bottom) : 0,
+        footerOverflowY: footer ? getComputedStyle(footer).overflowY : "",
+        footerPosition: footer ? getComputedStyle(footer).position : "",
+        footerScrollable: footer ? footer.scrollHeight > footer.clientHeight : false,
+        footerScrollTop: footer ? footer.scrollTop : 0,
+        headerPosition: header ? getComputedStyle(header).position : "",
+        headerTop: headerBox ? Math.round(headerBox.top) : 0,
+        horizontalScrollLeft: scrollRegion ? scrollRegion.scrollLeft : 0,
+        horizontalScrollable: scrollRegion ? scrollRegion.scrollWidth > scrollRegion.clientWidth : false,
         leftOverflowY: left ? getComputedStyle(left).overflowY : "",
         rightOverflowY: right ? getComputedStyle(right).overflowY : "",
         scrollRegionHeight: scrollRegion ? scrollRegion.clientHeight : 0,
+        scrollRegionScrollTop: scrollRegion ? scrollRegion.scrollTop : 0,
+        scrollRegionVerticalScrollable: scrollRegion ? scrollRegion.scrollHeight > scrollRegion.clientHeight : false,
         scrollRegionOverflowY: scrollRegion ? getComputedStyle(scrollRegion).overflowY : "",
+        viewportHeight: window.innerHeight,
       };
     });
     expect(fullscreenMetrics.bodyOverflowY).toBe("hidden");
+    expect(fullscreenMetrics.bodyScrollAfter).toBe(fullscreenMetrics.bodyScrollBefore);
+    expect(fullscreenMetrics.headerPosition).toBe("fixed");
+    expect(fullscreenMetrics.headerTop).toBe(0);
+    expect(fullscreenMetrics.footerPosition).toBe("fixed");
+    expect(fullscreenMetrics.footerBottom).toBeLessThanOrEqual(fullscreenMetrics.viewportHeight);
+    expect(fullscreenMetrics.footerOverflowY).toBe("auto");
+    expect(fullscreenMetrics.footerScrollable).toBe(true);
+    expect(fullscreenMetrics.footerScrollTop).toBeGreaterThan(0);
     expect(fullscreenMetrics.leftOverflowY).toBe("hidden");
     expect(fullscreenMetrics.centerOverflowY).toBe("hidden");
     expect(fullscreenMetrics.rightOverflowY).toBe("hidden");
     expect(fullscreenMetrics.scrollRegionOverflowY).toBe("auto");
     expect(fullscreenMetrics.scrollRegionHeight).toBeGreaterThan(0);
+    expect(fullscreenMetrics.scrollRegionVerticalScrollable).toBe(true);
+    expect(fullscreenMetrics.scrollRegionScrollTop).toBeGreaterThan(0);
+    expect(fullscreenMetrics.horizontalScrollable).toBe(true);
+    expect(fullscreenMetrics.horizontalScrollLeft).toBeGreaterThan(0);
 
     await expectNoPageFailures(failures);
   } finally {