Pin Tool Vote fullscreen header and footer - PR_26160_067-admin-tool-vote-template-conversion

Author: ToolboxAid

assets/theme-v2/css/layout.css

@@ -363,6 +363,13 @@ body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-regi
   overscroll-behavior: contain
 }
 
+body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-region .data-table thead th {
+  background: var(--card-background);
+  position: sticky;
+  top: var(--space-0);
+  z-index: var(--z-index-sm)
+}
+
 .account-panel {
   display: grid;
   grid-template-columns: var(--admin-panel-columns);

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

@@ -15,6 +15,8 @@
 | 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 |
+| Table sort buttons remain visible at the top inside `thead`. | `assets/theme-v2/css/layout.css` pins fullscreen Tool Vote `thead th` cells with sticky positioning; Playwright verifies the Tool sort button text remains visible after vertical table scrolling. | PASS |
+| `thead` remains pinned while data rows scroll. | Playwright verifies the Tool sort header cell reports `position: sticky`, stays inside the table scroll region, and remains above scrolled `tbody` rows after the table region scrolls to the bottom. | 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 |
@@ -42,4 +44,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, 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.
+The targeted Playwright lane verified the converted Tool Template V2 structure, Admin navigation, fixed fullscreen header/footer, footer scrollbar access, locked page scrolling, pinned `thead` sort buttons, `tbody` row scrolling under the pinned header 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,6 +139,7 @@ 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 sortButton = scrollRegion?.querySelector("thead [data-toolbox-votes-sort='toolName']");
       const header = document.querySelector("header.site-header");
       const footer = document.querySelector("footer.footer");
       const bodyScrollBefore = document.scrollingElement?.scrollTop || 0;
@@ -160,6 +161,9 @@ test("Tool Votes side menu includes Admin platform wireframes", async ({ page })
       }
       const headerBox = header?.getBoundingClientRect();
       const footerBox = footer?.getBoundingClientRect();
+      const scrollRegionBox = scrollRegion?.getBoundingClientRect();
+      const sortButtonBox = sortButton?.getBoundingClientRect();
+      const firstBodyRowBox = scrollRegion?.querySelector("tbody tr")?.getBoundingClientRect();
       return {
         bodyOverflowY: getComputedStyle(document.body).overflowY,
         bodyScrollAfter: document.scrollingElement?.scrollTop || 0,
@@ -170,16 +174,24 @@ test("Tool Votes side menu includes Admin platform wireframes", async ({ page })
         footerPosition: footer ? getComputedStyle(footer).position : "",
         footerScrollable: footer ? footer.scrollHeight > footer.clientHeight : false,
         footerScrollTop: footer ? footer.scrollTop : 0,
+        footerTop: footerBox ? Math.round(footerBox.top) : 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,
+        firstBodyRowBottom: firstBodyRowBox ? Math.round(firstBodyRowBox.bottom) : 0,
         leftOverflowY: left ? getComputedStyle(left).overflowY : "",
         rightOverflowY: right ? getComputedStyle(right).overflowY : "",
+        scrollRegionBottom: scrollRegionBox ? Math.round(scrollRegionBox.bottom) : 0,
         scrollRegionHeight: scrollRegion ? scrollRegion.clientHeight : 0,
         scrollRegionScrollTop: scrollRegion ? scrollRegion.scrollTop : 0,
         scrollRegionVerticalScrollable: scrollRegion ? scrollRegion.scrollHeight > scrollRegion.clientHeight : false,
         scrollRegionOverflowY: scrollRegion ? getComputedStyle(scrollRegion).overflowY : "",
+        sortButtonBottom: sortButtonBox ? Math.round(sortButtonBox.bottom) : 0,
+        sortButtonPosition: sortButton ? getComputedStyle(sortButton.closest("th")).position : "",
+        sortButtonText: sortButton ? sortButton.textContent.trim() : "",
+        sortButtonTop: sortButtonBox ? Math.round(sortButtonBox.top) : 0,
+        scrollRegionTop: scrollRegionBox ? Math.round(scrollRegionBox.top) : 0,
         viewportHeight: window.innerHeight,
       };
     });
@@ -201,6 +213,13 @@ test("Tool Votes side menu includes Admin platform wireframes", async ({ page })
     expect(fullscreenMetrics.scrollRegionScrollTop).toBeGreaterThan(0);
     expect(fullscreenMetrics.horizontalScrollable).toBe(true);
     expect(fullscreenMetrics.horizontalScrollLeft).toBeGreaterThan(0);
+    expect(fullscreenMetrics.scrollRegionBottom).toBeLessThanOrEqual(fullscreenMetrics.footerTop);
+    expect(fullscreenMetrics.sortButtonPosition).toBe("sticky");
+    expect(fullscreenMetrics.sortButtonText).toContain("Tool");
+    expect(fullscreenMetrics.sortButtonTop).toBeGreaterThanOrEqual(fullscreenMetrics.scrollRegionTop);
+    expect(fullscreenMetrics.sortButtonBottom).toBeLessThanOrEqual(fullscreenMetrics.scrollRegionBottom);
+    expect(fullscreenMetrics.sortButtonBottom).toBeLessThan(fullscreenMetrics.footerBottom);
+    expect(fullscreenMetrics.firstBodyRowBottom).toBeLessThanOrEqual(fullscreenMetrics.sortButtonTop);
 
     await expectNoPageFailures(failures);
   } finally {