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

fix: adapt NodeSummaryTable column widths per tab context

Browse source 
Count columns now have appropriate widths based on their header text:
- Dashboard: VMs/CTs use compact 40-50px (short labels)
- Storage: Storage/Disks use wider 50-70px and 45-60px
- Backups: Backups uses wider 50-70px

This fixes the broken appearance on Storage and Backups tabs where
longer header text didn't fit in the narrow fixed-width columns.
This commit is contained in:
rcourtman 2025-11-25 22:31:59 +00:00
parent 5dce402d62
commit 661ca22eab
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend-modern/src/components/shared/NodeSummaryTable.tsx
View file

@ -139,6 +139,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
header: string;
key: CountSortKey;
icon: Component<{ class?: string }>;
minWidth?: string;
maxWidth?: string;
}
const [sortKey, setSortKey] = createSignal<SortKey>('default');
@ -148,16 +150,16 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
switch (props.currentTab) {
case 'dashboard':
return [
{ header: 'VMs', key: 'vmCount', icon: VMIcon },
{ header: 'CTs', key: 'containerCount', icon: ContainerIcon },
{ header: 'VMs', key: 'vmCount', icon: VMIcon, minWidth: '40px', maxWidth: '50px' },
{ header: 'CTs', key: 'containerCount', icon: ContainerIcon, minWidth: '40px', maxWidth: '50px' },
];
case 'storage':
return [
{ header: 'Storage', key: 'storageCount', icon: DiskIcon },
{ header: 'Disks', key: 'diskCount', icon: DiskIcon },
{ header: 'Storage', key: 'storageCount', icon: DiskIcon, minWidth: '50px', maxWidth: '70px' },
{ header: 'Disks', key: 'diskCount', icon: DiskIcon, minWidth: '45px', maxWidth: '60px' },
];
case 'backups':
return [{ header: 'Backups', key: 'backupCount', icon: BackupIcon }];
return [{ header: 'Backups', key: 'backupCount', icon: BackupIcon, minWidth: '50px', maxWidth: '70px' }];
default:
return [];
}
@ -186,8 +188,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
label: cc.header,
priority: 'essential' as ColumnPriority,
icon: cc.icon,
minWidth: '40px',
maxWidth: '50px',
minWidth: cc.minWidth || '40px',
maxWidth: cc.maxWidth || '50px',
align: 'center',
});
});