danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Align Docker table row heights with Proxmox table

Browse source 
Change vertical padding from py-1 to py-0.5 on all data cells to match Proxmox guest table row heights for visual consistency across both monitoring interfaces.
This commit is contained in:
rcourtman 2025-10-28 22:41:30 +00:00
parent 33331d34f6
commit 28277757ab
1 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
View file

@ -303,7 +303,7 @@ const DockerHostGroupHeader: Component<{ host: DockerHost; colspan: number }> =
return ( return (
<tr class="bg-gray-50 dark:bg-gray-900/40"> <tr class="bg-gray-50 dark:bg-gray-900/40">
<td colSpan={props.colspan} class="py-1 pr-2 pl-4"> <td colSpan={props.colspan} class="py-0.5 pr-2 pl-4">
<div class="flex flex-nowrap items-center gap-2 whitespace-nowrap text-sm font-semibold text-slate-700 dark:text-slate-100"> <div class="flex flex-nowrap items-center gap-2 whitespace-nowrap text-sm font-semibold text-slate-700 dark:text-slate-100">
<span>{displayName}</span> <span>{displayName}</span>
<Show when={props.host.displayName && props.host.displayName !== props.host.hostname}> <Show when={props.host.displayName && props.host.displayName !== props.host.hostname}>
@ -393,7 +393,7 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
onClick={toggle} onClick={toggle}
aria-expanded={expanded()} aria-expanded={expanded()}
> >
<td class="pl-4 pr-2 py-1"> <td class="pl-4 pr-2 py-0.5">
<div class="flex items-center gap-1.5 min-w-0"> <div class="flex items-center gap-1.5 min-w-0">
<div class="flex items-center gap-1.5 min-w-0 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"> <div class="flex items-center gap-1.5 min-w-0 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
<span class="truncate font-semibold" title={containerTitle()}> <span class="truncate font-semibold" title={containerTitle()}>
@ -402,7 +402,7 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
</div> </div>
</div> </div>
</td> </td>
<td class="px-2 py-1"> <td class="px-2 py-0.5">
<span <span
class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass( class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass(
'container', 'container',
@ -411,17 +411,17 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
Container Container
</span> </span>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300"> <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<span class="truncate" title={container.image}> <span class="truncate" title={container.image}>
{container.image || '—'} {container.image || '—'}
</span> </span>
</td> </td>
<td class="px-2 py-1 text-xs"> <td class="px-2 py-0.5 text-xs">
<span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${statusBadgeClass()}`}> <span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${statusBadgeClass()}`}>
{statusLabel()} {statusLabel()}
</span> </span>
</td> </td>
<td class="px-2 py-1"> <td class="px-2 py-0.5">
<Show <Show
when={isRunning() && container.cpuPercent && container.cpuPercent > 0} when={isRunning() && container.cpuPercent && container.cpuPercent > 0}
fallback={<span class="text-xs text-gray-400">—</span>} fallback={<span class="text-xs text-gray-400">—</span>}
@ -429,7 +429,7 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
<MetricBar value={cpuPercent()} label={formatPercent(cpuPercent())} type="cpu" /> <MetricBar value={cpuPercent()} label={formatPercent(cpuPercent())} type="cpu" />
</Show> </Show>
</td> </td>
<td class="px-2 py-1"> <td class="px-2 py-0.5">
<Show <Show
when={isRunning() && container.memoryUsageBytes && container.memoryUsageBytes > 0} when={isRunning() && container.memoryUsageBytes && container.memoryUsageBytes > 0}
fallback={<span class="text-xs text-gray-400">—</span>} fallback={<span class="text-xs text-gray-400">—</span>}
@ -442,13 +442,13 @@ const DockerContainerRow: Component<{ row: Extract<DockerRow, { kind: 'container
/> />
</Show> </Show>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300"> <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}> <Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
{restarts()} {restarts()}
<span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span> <span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span>
</Show> </Show>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300"> <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}> <Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
{uptime()} {uptime()}
</Show> </Show>
@ -567,7 +567,7 @@ const DockerServiceRow: Component<{ row: Extract<DockerRow, { kind: 'service' }>
onClick={toggle} onClick={toggle}
aria-expanded={expanded()} aria-expanded={expanded()}
> >
<td class="pl-4 pr-2 py-1"> <td class="pl-4 pr-2 py-0.5">
<div class="flex items-center gap-1.5 min-w-0"> <div class="flex items-center gap-1.5 min-w-0">
<div class="flex items-center gap-1.5 min-w-0 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"> <div class="flex items-center gap-1.5 min-w-0 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
<span class="truncate font-semibold" title={serviceTitle()}> <span class="truncate font-semibold" title={serviceTitle()}>
@ -581,30 +581,30 @@ const DockerServiceRow: Component<{ row: Extract<DockerRow, { kind: 'service' }>
</Show> </Show>
</div> </div>
</td> </td>
<td class="px-2 py-1"> <td class="px-2 py-0.5">
<span class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass('service')}`}> <span class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass('service')}`}>
Service Service
</span> </span>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300"> <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
<span class="truncate" title={service.image}> <span class="truncate" title={service.image}>
{service.image || '—'} {service.image || '—'}
</span> </span>
</td> </td>
<td class="px-2 py-1 text-xs"> <td class="px-2 py-0.5 text-xs">
<span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${badge.class}`}> <span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${badge.class}`}>
{badge.label} {badge.label}
</span> </span>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-400 dark:text-gray-500">—</td> <td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
<td class="px-2 py-1 text-xs text-gray-400 dark:text-gray-500">—</td> <td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap"> <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
<span class="font-semibold text-gray-900 dark:text-gray-100"> <span class="font-semibold text-gray-900 dark:text-gray-100">
{(service.runningTasks ?? 0)}/{service.desiredTasks ?? 0} {(service.runningTasks ?? 0)}/{service.desiredTasks ?? 0}
</span> </span>
<span class="ml-1 text-gray-500 dark:text-gray-400">tasks</span> <span class="ml-1 text-gray-500 dark:text-gray-400">tasks</span>
</td> </td>
<td class="px-2 py-1 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap"> <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
<Show when={updatedAt} fallback="—"> <Show when={updatedAt} fallback="—">
{(timestamp) => ( {(timestamp) => (
<span title={new Date(timestamp()).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}> <span title={new Date(timestamp()).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}>