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: improve NodeSummaryTable visual layout and selection feedback

Browse Source 
- Remove table-fixed and use responsive width classes
- Remove inline styles, use pure Tailwind classes
- Fix left border alignment issue when selecting rows
- Improve visual feedback for selected rows with stronger blue background
- Clean up redundant whitespace-nowrap and inline flex styles
This commit is contained in:
Pulse Monitor
2025-08-29 14:31:02 +00:00
parent c806ffe06d
commit f4dd612ec6
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/shared/NodeSummaryTable.tsx
+14 -14
View File
@@ -100,22 +100,22 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
return (
<div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<div class="overflow-x-auto">
<table class="w-full table-fixed">
<table class="w-full min-w-[600px]">
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap" style="width: 20%;">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-1/4">
{props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap" style="width: 8%;">Status</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap" style="width: 10%;">Uptime</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap" style="width: 15%;">CPU</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap" style="width: 15%;">Memory</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap" style="width: 15%;">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-20">Status</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-24">Uptime</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">CPU</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">Memory</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">
{props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}
</th>
<For each={getCountHeader()}>
{(header) => (
<th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap" style="width: 8%;">{header}</th>
<th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-16">{header}</th>
)}
</For>
</tr>
@@ -173,20 +173,20 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
return (
<tr
class={`hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors ${
class={`cursor-pointer transition-colors ${
isSelected()
? 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-l-blue-500'
: 'border-l-4 border-l-transparent'
? 'bg-blue-100 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/30'
: 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
}`}
onClick={() => props.onNodeClick(nodeId, item.type)}
>
<td class="px-2 py-0.5 whitespace-nowrap">
<div class="flex items-center gap-1" style="display: flex; white-space: nowrap;">
<div class="flex items-center gap-1">
<a
href={isPVE ? (node!.host || `https://${node!.name}:8006`) : (pbs!.host || `https://${pbs!.name}:8007`)}
target="_blank"
onClick={(e) => e.stopPropagation()}
class="font-medium text-[11px] text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 whitespace-nowrap"
class="font-medium text-[11px] text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
>
{item.data.name}
</a>
@@ -212,7 +212,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
</div>
</td>
<td class="px-2 py-0.5 whitespace-nowrap">
<div class="flex items-center gap-1" style="display: flex; white-space: nowrap;">
<div class="flex items-center gap-1">
<span class={`h-2 w-2 flex-shrink-0 rounded-full ${
isOnline() ? 'bg-green-500' : 'bg-red-500'
}`} />