gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-22 19:23:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve sticky column border visual artifacts at different resolutions

Browse Source 
- 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>
This commit is contained in:
courtmanr@gmail.com
2025-05-30 17:23:13 +01:00
parent 3381981bb8
commit f4ae05c00d
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/public/js/ui/dashboard.js
+1 -1
View File
@@ -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>
src/public/js/ui/pbs.js
+8 -1
View File
@@ -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) {
src/public/js/ui/storage.js
+1 -1
View File
@@ -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>