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

Restore wider layout and add intelligent column scaling

Browse Source 
Restores v4.22.0-rc.6 wider page layout (110rem/1760px max-width) and implements responsive column widths for dashboard table. Name column and progress bars scale wider on xl screens while small columns (Type, VMID, I/O metrics) stay compact. This better utilizes screen space without creating wasteful empty gaps.
This commit is contained in:
rcourtman
2025-10-11 18:55:13 +00:00
parent 26e52b531e
commit 54f68c00a5
3 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Dashboard/Dashboard.tsx
+4 -4
View File
@@ -703,7 +703,7 @@ export function Dashboard(props: DashboardProps) {
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
<th
class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[200px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[220px] xl:w-[260px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('name')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
tabindex="0"
@@ -731,19 +731,19 @@ export function Dashboard(props: DashboardProps) {
Uptime {sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[160px] xl:w-[200px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
onClick={() => handleSort('cpu')}
>
CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[160px] xl:w-[200px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
onClick={() => handleSort('memory')}
>
Memory {sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
</th>
<th
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[160px] xl:w-[200px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
onClick={() => handleSort('disk')}
>
Disk {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
frontend-modern/src/components/Dashboard/GuestRow.tsx
+3 -3
View File
@@ -316,7 +316,7 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* CPU */}
<td class="py-0.5 px-2 w-[140px]">
<td class="py-0.5 px-2 w-[160px] xl:w-[200px]">
<Show when={showGuestMetrics()} fallback={<span class="text-sm text-gray-400">-</span>}>
<MetricBar
value={cpuPercent()}
@@ -332,7 +332,7 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* Memory */}
<td class="py-0.5 px-2 w-[140px]">
<td class="py-0.5 px-2 w-[160px] xl:w-[200px]">
<div title={memoryTooltip() ?? undefined}>
<Show when={showGuestMetrics()} fallback={<span class="text-sm text-gray-400">-</span>}>
<MetricBar
@@ -346,7 +346,7 @@ export function GuestRow(props: GuestRowProps) {
</td>
{/* Disk – surface usage even if guest is currently stopped so users can see last reported values */}
<td class="py-0.5 px-2 w-[140px]">
<td class="py-0.5 px-2 w-[160px] xl:w-[200px]">
<Show
when={hasDiskUsage()}
fallback={
frontend-modern/src/index.css
+5 -3
View File
@@ -119,13 +119,15 @@
@layer components {
.pulse-shell {
width: 95%;
max-width: 80rem;
width: min(96vw, 110rem);
max-width: 100%;
margin-inline: auto;
padding-inline: clamp(1.25rem, 3vw, 3.25rem);
transition: padding-inline 0.3s ease;
}
.pulse-panel {
padding: 0.75rem;
padding: clamp(0.75rem, 1.6vw, 1.5rem);
}
/* Card styles */