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

fix: properly set fixed widths and prevent text wrapping in Node Summary Table

Browse Source 
- Set table minimum width to 1000px for proper layout
- Use fixed w-[200px] instead of min-w for MetricBar columns
- Changed MetricBar text from truncate to whitespace-nowrap
- Added min-width to node name column
- Ensures consistent column widths and no text wrapping
This commit is contained in:
Pulse Monitor
2025-08-26 19:12:34 +00:00
parent acb4162532
commit 516bbb7b10
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Dashboard/MetricBar.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export function MetricBar(props: MetricBarProps) {
style={{ width: `${width()}%` }}
/>
<span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">
<span class="truncate px-0.5">{displayText()}</span>
<span class="whitespace-nowrap px-0.5">{displayText()}</span>
</span>
</div>
</div>
frontend-modern/src/components/shared/NodeSummaryTable.tsx
+8 -8
View File
@@ -88,16 +88,16 @@ 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 min-w-[900px]">
<table class="min-w-[1000px]">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap min-w-[150px]">
{props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}
</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap">Status</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap min-w-[180px]">CPU</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap min-w-[180px]">Memory</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap min-w-[180px]">
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap w-[200px]">CPU</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap w-[200px]">Memory</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap w-[200px]">
{props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}
</th>
<For each={getCountHeader()}>
@@ -207,7 +207,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
</span>
</div>
</td>
<td class="px-2 py-0.5 min-w-[180px]">
<td class="px-2 py-0.5 w-[200px]">
<MetricBar
value={cpuPercent()}
label={`${cpuPercent()}%`}
@@ -215,7 +215,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
type="cpu"
/>
</td>
<td class="px-2 py-0.5 min-w-[180px]">
<td class="px-2 py-0.5 w-[200px]">
<MetricBar
value={memPercent()}
label={`${memPercent()}%`}
@@ -227,7 +227,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
type="memory"
/>
</td>
<td class="px-2 py-0.5 min-w-[180px]">
<td class="px-2 py-0.5 w-[200px]">
<MetricBar
value={diskPercent()}
label={`${diskPercent()}%`}