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

fix: make metric bars responsive with minimum width constraints

Browse Source 
- changed fixed widths to minimum widths for table columns
- made MetricBar component expand to fill available space
- maintains minimum width of 120px to prevent text cutoff
- bars now grow on wider screens while staying readable on narrow ones
This commit is contained in:
Pulse Monitor
2025-08-29 22:09:37 +00:00
parent 57f459544c
commit 25d82ef9f1
5 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Backups/UnifiedBackups.tsx
+3 -3
View File
@@ -1006,14 +1006,14 @@ const UnifiedBackups: Component = () => {
</span>
</div>
</td>
<td class="p-0.5 px-1.5 w-[180px]">
<td class="p-0.5 px-1.5 min-w-[180px]">
<MetricBar
value={cpuPercent()}
label={`${cpuPercent()}%`}
type="cpu"
/>
</td>
<td class="p-0.5 px-1.5 w-[180px]">
<td class="p-0.5 px-1.5 min-w-[180px]">
<MetricBar
value={memPercent()}
label={`${memPercent()}%`}
@@ -1021,7 +1021,7 @@ const UnifiedBackups: Component = () => {
type="memory"
/>
</td>
<td class="p-0.5 px-1.5 w-[180px]">
<td class="p-0.5 px-1.5 min-w-[180px]">
<MetricBar
value={storage.percent}
label={`${storage.percent}%`}
frontend-modern/src/components/Dashboard/Dashboard.tsx
+3 -3
View File
@@ -561,7 +561,7 @@ export function Dashboard(props: DashboardProps) {
</span>
</div>
</td>
<td class="p-1 px-2 w-[180px]">
<td class="p-1 px-2 min-w-[180px]">
<MetricBar
value={cpuPercent()}
label={`${cpuPercent()}%`}
@@ -569,7 +569,7 @@ export function Dashboard(props: DashboardProps) {
type="cpu"
/>
</td>
<td class="p-1 px-2 w-[180px]">
<td class="p-1 px-2 min-w-[180px]">
<MetricBar
value={memPercent()}
label={`${memPercent()}%`}
@@ -577,7 +577,7 @@ export function Dashboard(props: DashboardProps) {
type="memory"
/>
</td>
<td class="p-1 px-2 w-[180px]">
<td class="p-1 px-2 min-w-[180px]">
<MetricBar
value={diskPercent()}
label={`${diskPercent()}%`}
frontend-modern/src/components/Dashboard/MetricBar.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export function MetricBar(props: MetricBarProps) {
return (
<div class="metric-text">
<div class="relative w-[120px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
<div class="relative min-w-[120px] w-full h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
<div
class={`absolute top-0 left-0 h-full ${progressColorClass()}`}
style={{ width: `${width()}%` }}
frontend-modern/src/components/Storage/Storage.tsx
+2 -2
View File
@@ -269,7 +269,7 @@ const Storage: Component = () => {
<Show when={viewMode() === 'node'}>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">Shared</th>
</Show>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[200px]">Usage</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-[200px]">Usage</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">Free</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">Total</th>
</tr>
@@ -361,7 +361,7 @@ const Storage: Component = () => {
</Show>
<td class="p-0.5 px-1.5">
<div class="relative w-[200px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
<div class="relative min-w-[200px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
<div
class={`absolute top-0 left-0 h-full ${getProgressBarColor(usagePercent)}`}
style={{ width: `${usagePercent}%` }}
frontend-modern/src/components/shared/NodeSummaryTable.tsx
+6 -6
View File
@@ -106,16 +106,16 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-1/4">
{props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}
</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-20">Status</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-24">Uptime</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">CPU</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">Memory</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-32">
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-20">Status</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-24">Uptime</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-32">CPU</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-32">Memory</th>
<th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-32">
{props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}
</th>
<For each={getCountHeader()}>
{(header) => (
<th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-16">{header}</th>
<th class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-16">{header}</th>
)}
</For>
</tr>