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

Use left-aligned headers consistently in Docker table

Browse source
This commit is contained in:
rcourtman 2025-11-29 21:31:44 +00:00
parent f2983634e5
commit 02d8d8a9f9
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1278,7 +1278,7 @@ const DockerContainerRow: Component<{
<For each={DOCKER_COLUMNS}> <For each={DOCKER_COLUMNS}>
{(column) => ( {(column) => (
<td <td
class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'cpu' || column.id === 'memory' ? 'text-center' : ''}`} class="py-0.5 align-middle whitespace-nowrap"
style={{ "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined }} style={{ "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined }}
> >
{renderCell(column)} {renderCell(column)}
@ -1983,7 +1983,7 @@ const DockerServiceRow: Component<{
<For each={DOCKER_COLUMNS}> <For each={DOCKER_COLUMNS}>
{(column) => ( {(column) => (
<td <td
class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'cpu' || column.id === 'memory' ? 'text-center' : ''}`} class="py-0.5 align-middle whitespace-nowrap"
style={{ "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined }} style={{ "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined }}
> >
{renderCell(column)} {renderCell(column)}
@ -2012,8 +2012,8 @@ const DockerServiceRow: Component<{
<th class="py-1 px-2 text-left font-medium w-[80px]">Type</th> <th class="py-1 px-2 text-left font-medium w-[80px]">Type</th>
<th class="py-1 px-2 text-left font-medium">Node</th> <th class="py-1 px-2 text-left font-medium">Node</th>
<th class="py-1 px-2 text-left font-medium">State</th> <th class="py-1 px-2 text-left font-medium">State</th>
<th class="py-1 px-2 text-center font-medium w-[120px]">CPU</th> <th class="py-1 px-2 text-left font-medium w-[120px]">CPU</th>
<th class="py-1 px-2 text-center font-medium w-[140px]">Memory</th> <th class="py-1 px-2 text-left font-medium w-[140px]">Memory</th>
<th class="py-1 px-2 text-left font-medium">Updated</th> <th class="py-1 px-2 text-left font-medium">Updated</th>
</tr> </tr>
</thead> </thead>
@ -2077,7 +2077,7 @@ const DockerServiceRow: Component<{
{task.currentState || task.desiredState || 'Unknown'} {task.currentState || task.desiredState || 'Unknown'}
</span> </span>
</td> </td>
<td class="py-1 px-2 w-[120px] text-center"> <td class="py-1 px-2 w-[120px]">
<Show when={cpu > 0} fallback={<span class="text-gray-400">—</span>}> <Show when={cpu > 0} fallback={<span class="text-gray-400">—</span>}>
<MetricBar <MetricBar
value={Math.min(100, cpu)} value={Math.min(100, cpu)}
@ -2087,7 +2087,7 @@ const DockerServiceRow: Component<{
/> />
</Show> </Show>
</td> </td>
<td class="py-1 px-2 w-[140px] text-center"> <td class="py-1 px-2 w-[140px]">
<Show when={mem > 0} fallback={<span class="text-gray-400">—</span>}> <Show when={mem > 0} fallback={<span class="text-gray-400">—</span>}>
<MetricBar <MetricBar
value={Math.min(100, mem)} value={Math.min(100, mem)}
@ -2509,7 +2509,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
const isResource = col.id === 'resource'; const isResource = col.id === 'resource';
return ( return (
<th <th
class={`${isResource ? 'pl-4 sm:pl-5 lg:pl-6 pr-2' : 'px-2'} py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 ${col.id === 'cpu' || col.id === 'memory' ? 'text-center' : 'text-left'} font-medium whitespace-nowrap`} class={`${isResource ? 'pl-4 sm:pl-5 lg:pl-6 pr-2' : 'px-2'} py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-left font-medium whitespace-nowrap`}
style={{ "min-width": col.id === 'cpu' || col.id === 'memory' ? '140px' : undefined }} style={{ "min-width": col.id === 'cpu' || col.id === 'memory' ? '140px' : undefined }}
onClick={() => colSortKey && handleSort(colSortKey)} onClick={() => colSortKey && handleSort(colSortKey)}
onKeyDown={(e) => e.key === 'Enter' && colSortKey && handleSort(colSortKey)} onKeyDown={(e) => e.key === 'Enter' && colSortKey && handleSort(colSortKey)}