From 70dc35aa2112c4da55fadeddaaae262a61a23a8e Mon Sep 17 00:00:00 2001
From: "courtmanr@gmail.com" <courtmanr@gmail.com>
Date: Sat, 31 May 2025 00:33:34 +0100
Subject: [PATCH] fix: resolve sticky column header issue in storage tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the same sticky header pattern used in dashboard to fix column header
positioning in storage table. Individual header cells are now sticky instead
of relying on row-level sticky positioning.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/public/js/ui/storage.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/public/js/ui/storage.js b/src/public/js/ui/storage.js
index eed01450c..a1ffe8cf7 100644
--- a/src/public/js/ui/storage.js
+++ b/src/public/js/ui/storage.js
@@ -324,16 +324,16 @@ PulseApp.ui.storage = (() => {
             };
             
             thead.innerHTML = `
-                <tr class="border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 sticky top-0 z-10 text-xs font-medium tracking-wider text-left text-gray-600 uppercase dark:text-gray-300">
-                  <th class="sticky left-0 bg-gray-50 dark:bg-gray-700 z-20 p-1 px-2 border-r border-gray-300 dark:border-gray-600">Storage</th>
-                  <th class="p-1 px-2">Content</th>
-                  <th class="p-1 px-2">Type</th>
-                  <th class="p-1 px-2">Shared</th>
-                  <th class="p-1 px-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" id="usage-sort-header">
+                <tr class="border-b border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-xs font-medium tracking-wider text-left text-gray-600 uppercase dark:text-gray-300">
+                  <th class="sticky left-0 top-0 bg-gray-50 dark:bg-gray-700 z-20 p-1 px-2 border-r border-gray-300 dark:border-gray-600">Storage</th>
+                  <th class="sticky top-0 bg-gray-50 dark:bg-gray-700 z-10 p-1 px-2">Content</th>
+                  <th class="sticky top-0 bg-gray-50 dark:bg-gray-700 z-10 p-1 px-2">Type</th>
+                  <th class="sticky top-0 bg-gray-50 dark:bg-gray-700 z-10 p-1 px-2">Shared</th>
+                  <th class="sticky top-0 bg-gray-50 dark:bg-gray-700 z-10 p-1 px-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" id="usage-sort-header">
                     Usage${sortIndicator('usage-desc')}${sortIndicator('usage-asc')}
                   </th>
-                  <th class="p-1 px-2">Avail</th>
-                  <th class="p-1 px-2">Total</th>
+                  <th class="sticky top-0 bg-gray-50 dark:bg-gray-700 z-10 p-1 px-2">Avail</th>
+                  <th class="sticky top-0 bg-gray-50 dark:bg-gray-700 z-10 p-1 px-2">Total</th>
                 </tr>
               `;
             table.appendChild(thead);