From 02d63661ac527e8470e6ecfbd26f4bca755d7828 Mon Sep 17 00:00:00 2001
From: "courtmanr@gmail.com" <courtmanr@gmail.com>
Date: Fri, 30 May 2025 17:23:13 +0100
Subject: [PATCH] fix: resolve sticky column border visual artifacts at
 different resolutions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add bottom border to sticky columns in dashboard, PBS, and storage views
- Ensure sticky cells inherit row background colors (failed/running tasks)
- Fix issue where every other row appeared grouped due to missing borders

Fixes #87

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/public/js/ui/dashboard.js | 2 +-
 src/public/js/ui/pbs.js       | 9 ++++++++-
 src/public/js/ui/storage.js   | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/public/js/ui/dashboard.js b/src/public/js/ui/dashboard.js
index 71d8b5d6b..92061f36c 100644
--- a/src/public/js/ui/dashboard.js
+++ b/src/public/js/ui/dashboard.js
@@ -1003,7 +1003,7 @@ PulseApp.ui.dashboard = (() => {
         }
 
         row.innerHTML = `
-            <td class="sticky left-0 bg-white dark:bg-gray-800 z-10 p-1 px-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-0" title="${guest.name}">${guest.name}</td>
+            <td class="sticky left-0 bg-white dark:bg-gray-800 z-10 p-1 px-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-0 border-b border-gray-200 dark:border-gray-700" title="${guest.name}">${guest.name}</td>
             <td class="p-1 px-2">${typeIcon}</td>
             <td class="p-1 px-2">${guest.id}</td>
             <td class="p-1 px-2 whitespace-nowrap overflow-hidden text-ellipsis">${uptimeDisplay}</td>
diff --git a/src/public/js/ui/pbs.js b/src/public/js/ui/pbs.js
index 86da70468..907f1ce57 100644
--- a/src/public/js/ui/pbs.js
+++ b/src/public/js/ui/pbs.js
@@ -438,7 +438,14 @@ PulseApp.ui.pbs = (() => {
         row.className = rowClasses;
 
         const targetCell = document.createElement('td');
-        targetCell.className = `${CSS_CLASSES.P1_PX2} ${CSS_CLASSES.TEXT_SM} ${CSS_CLASSES.TEXT_GRAY_700_DARK_GRAY_300} sticky left-0 bg-white dark:bg-gray-800 z-10`;
+        // Determine sticky cell background based on task status
+        let stickyBg = 'bg-white dark:bg-gray-800';
+        if (isFailed) {
+            stickyBg = 'bg-red-50 dark:bg-red-900/20';
+        } else if (task.status && task.status.toLowerCase().includes('running')) {
+            stickyBg = 'bg-blue-50 dark:bg-blue-900/20';
+        }
+        targetCell.className = `${CSS_CLASSES.P1_PX2} ${CSS_CLASSES.TEXT_SM} ${CSS_CLASSES.TEXT_GRAY_700_DARK_GRAY_300} sticky left-0 ${stickyBg} z-10 border-b border-gray-200 dark:border-gray-700`;
         
         // Add expand indicator for failed tasks
         if (isFailed) {
diff --git a/src/public/js/ui/storage.js b/src/public/js/ui/storage.js
index 8f953d132..b5fe1d770 100644
--- a/src/public/js/ui/storage.js
+++ b/src/public/js/ui/storage.js
@@ -595,7 +595,7 @@ PulseApp.ui.storage = (() => {
                             (isWarning ? ' <span class="inline-block w-2 h-2 bg-yellow-500 rounded-full ml-1"></span>' : '');
 
         row.innerHTML = `
-            <td class="sticky left-0 ${isCritical ? 'bg-red-50 dark:bg-red-900/10' : (isWarning ? 'bg-yellow-50 dark:bg-yellow-900/10' : 'bg-white dark:bg-gray-800')} z-10 p-1 px-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-0 text-gray-900 dark:text-gray-100">${store.storage || 'N/A'}${warningBadge}</td>
+            <td class="sticky left-0 ${isCritical ? 'bg-red-50 dark:bg-red-900/10' : (isWarning ? 'bg-yellow-50 dark:bg-yellow-900/10' : 'bg-white dark:bg-gray-800')} z-10 p-1 px-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-0 text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700">${store.storage || 'N/A'}${warningBadge}</td>
             <td class="p-1 px-2 whitespace-nowrap text-gray-600 dark:text-gray-300 text-xs">${contentBadges}</td>
             <td class="p-1 px-2 whitespace-nowrap text-gray-600 dark:text-gray-300 text-xs">${store.type || 'N/A'}</td>
             <td class="p-1 px-2 whitespace-nowrap text-center">${sharedText}</td>