Add Theme V2 background to sticky Tool Vote table header - PR_26160_067-admin-tool-vote-template-conversion

Author: ToolboxAid

assets/theme-v2/css/layout.css

@@ -364,7 +364,7 @@ body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-regi
 }
 
 body.tool-focus-mode .tool-workspace--table-scroll-focus .tool-table-scroll-region .data-table thead th {
-  background: var(--card-background);
+  background: var(--panel);
   position: sticky;
   top: var(--space-0);
   z-index: var(--z-index-sm)

docs_build/dev/admin-notes/admin/index.txt

@@ -0,0 +1,3 @@
+[ ] all Admin pages should have a single importable admin menu loaded on the lefts side of the screen
+
+admin/tool-votes.html

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

@@ -17,6 +17,8 @@
 | 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 |
+| Sticky `thead` uses a non-transparent Theme V2 surface background. | Sticky Tool Vote `thead th` cells use `background: var(--panel)`, the same solid Theme V2 panel token used by sticky tool chrome; Playwright verifies `background-color` is non-transparent and `background-image` is `none`. | PASS |
+| Sticky `thead` sort buttons remain readable. | Playwright verifies the sticky header sort button remains visible and its text color is non-transparent and distinct from its button background. | 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 |
@@ -44,4 +46,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, 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.
+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, the sticky `thead` `--panel` background, `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

@@ -164,6 +164,9 @@ test("Tool Votes side menu includes Admin platform wireframes", async ({ page })
       const scrollRegionBox = scrollRegion?.getBoundingClientRect();
       const sortButtonBox = sortButton?.getBoundingClientRect();
       const firstBodyRowBox = scrollRegion?.querySelector("tbody tr")?.getBoundingClientRect();
+      const stickyHeaderCell = sortButton?.closest("th");
+      const stickyHeaderStyle = stickyHeaderCell ? getComputedStyle(stickyHeaderCell) : null;
+      const sortButtonStyle = sortButton ? getComputedStyle(sortButton) : null;
       return {
         bodyOverflowY: getComputedStyle(document.body).overflowY,
         bodyScrollAfter: document.scrollingElement?.scrollTop || 0,
@@ -187,8 +190,12 @@ test("Tool Votes side menu includes Admin platform wireframes", async ({ page })
         scrollRegionScrollTop: scrollRegion ? scrollRegion.scrollTop : 0,
         scrollRegionVerticalScrollable: scrollRegion ? scrollRegion.scrollHeight > scrollRegion.clientHeight : false,
         scrollRegionOverflowY: scrollRegion ? getComputedStyle(scrollRegion).overflowY : "",
+        stickyHeaderBackgroundColor: stickyHeaderStyle?.backgroundColor || "",
+        stickyHeaderBackgroundImage: stickyHeaderStyle?.backgroundImage || "",
+        sortButtonBackgroundColor: sortButtonStyle?.backgroundColor || "",
         sortButtonBottom: sortButtonBox ? Math.round(sortButtonBox.bottom) : 0,
-        sortButtonPosition: sortButton ? getComputedStyle(sortButton.closest("th")).position : "",
+        sortButtonColor: sortButtonStyle?.color || "",
+        sortButtonPosition: stickyHeaderStyle?.position || "",
         sortButtonText: sortButton ? sortButton.textContent.trim() : "",
         sortButtonTop: sortButtonBox ? Math.round(sortButtonBox.top) : 0,
         scrollRegionTop: scrollRegionBox ? Math.round(scrollRegionBox.top) : 0,
@@ -215,6 +222,11 @@ test("Tool Votes side menu includes Admin platform wireframes", async ({ page })
     expect(fullscreenMetrics.horizontalScrollLeft).toBeGreaterThan(0);
     expect(fullscreenMetrics.scrollRegionBottom).toBeLessThanOrEqual(fullscreenMetrics.footerTop);
     expect(fullscreenMetrics.sortButtonPosition).toBe("sticky");
+    expect(fullscreenMetrics.stickyHeaderBackgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+    expect(fullscreenMetrics.stickyHeaderBackgroundColor).not.toBe("transparent");
+    expect(fullscreenMetrics.stickyHeaderBackgroundImage).toBe("none");
+    expect(fullscreenMetrics.sortButtonColor).not.toBe("rgba(0, 0, 0, 0)");
+    expect(fullscreenMetrics.sortButtonColor).not.toBe(fullscreenMetrics.sortButtonBackgroundColor);
     expect(fullscreenMetrics.sortButtonText).toContain("Tool");
     expect(fullscreenMetrics.sortButtonTop).toBeGreaterThanOrEqual(fullscreenMetrics.scrollRegionTop);
     expect(fullscreenMetrics.sortButtonBottom).toBeLessThanOrEqual(fullscreenMetrics.scrollRegionBottom);