gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-10-21 19:25:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebalance Kubernetes nodes and deployments table column widths

Browse Source 
Same equal-width problem on /kubernetes/nodes: the Nodes table (9
columns) and the Deployments table (7 columns) both ran under
table-fixed with no per-column desktop widths, so longer values like
runtime "containerd://1.7.20" and capacity "6 cores / 51.0 GB"
truncated, while the four integer-count Deployments columns (Desired /
Updated / Ready / Available) each held 183px for a single-digit value.

Set explicit md:w-[...] on every TableHead so the longer-content
columns (Node, Runtime, Capacity, Deployment, Namespace) get the room
they need, the CPU and Memory bars get a balanced share each, and the
short text and integer-count columns trim to fit their headers and
values. Mobile widths are unchanged.

Leaving KubernetesClustersTable.tsx alone for now: another agent has
it mid-edit. Same fix pattern can be applied to it once their work
lands.
This commit is contained in:
rcourtman
2026-05-20 10:42:12 +01:00
parent e20270f5a0
commit 037919abed
2 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/features/kubernetes/KubernetesDeploymentsTable.tsx
+20 -7
View File
@@ -94,21 +94,34 @@ export const KubernetesDeploymentsTable: Component<{
<Table class="min-w-full table-fixed text-xs md:min-w-[820px]">
<TableHeader>
<TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}>
<TableHead class={getPlatformTableHeadClass()}>Deployment</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
{/*
Desktop widths: Deployment, Namespace, and Cluster take
the biggest shares because their content can be long.
The four integer-count columns (Desired / Updated /
Ready / Available) trim to what their headers plus
1-2 digit values need. Mobile widths are unchanged.
*/}
<TableHead class={`${getPlatformTableHeadClass()} md:w-[27%]`}>
Deployment
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[21%]`}>
Namespace
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[16%]`}>
Cluster
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[9%]`}>
Desired
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[9%]`}>
Updated
</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>Ready</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>Available</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[9%]`}>
Ready
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[9%]`}>
Available
</TableHead>
</TableRow>
</TableHeader>
<TableBody class={PLATFORM_TABLE_BODY_CLASS}>
frontend-modern/src/features/kubernetes/KubernetesNodesTable.tsx
+26 -9
View File
@@ -143,23 +143,40 @@ export const KubernetesNodesTable: Component<{
<Table class="min-w-full table-fixed text-xs md:min-w-[1000px]">
<TableHeader>
<TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}>
<TableHead class={getPlatformTableHeadClass()}>Node</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
{/*
Desktop widths: Node gets headroom for cluster-style
names, Runtime gets room for "containerd://1.7.20"
-style values, Capacity gets room for "6 cores /
51.0 GB" strings, CPU and Memory bars share an
equal slice, and the short-text columns (Cluster,
Roles, Kubelet, Uptime) trim accordingly. Mobile
widths are unchanged.
*/}
<TableHead class={`${getPlatformTableHeadClass()} md:w-[15%]`}>
Node
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[10%]`}>
Cluster
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[10%]`}>
Roles
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[8%]`}>
Kubelet
</TableHead>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass()} hidden md:table-cell md:w-[15%]`}>
Runtime
</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>CPU</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>Memory</TableHead>
<TableHead class={getPlatformTableHeadClass('right')}>Capacity</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell`}>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[11%]`}>
CPU
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[11%]`}>
Memory
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} md:w-[14%]`}>
Capacity
</TableHead>
<TableHead class={`${getPlatformTableHeadClass('right')} hidden md:table-cell md:w-[6%]`}>
Uptime
</TableHead>
</TableRow>