From 54f68c00a5f1bc5c20e402db5d29588f34eb3f23 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 11 Oct 2025 18:55:13 +0000
Subject: [PATCH] Restore wider layout and add intelligent column scaling

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.
---
 frontend-modern/src/components/Dashboard/Dashboard.tsx | 8 ++++----
 frontend-modern/src/components/Dashboard/GuestRow.tsx  | 6 +++---
 frontend-modern/src/index.css                          | 8 +++++---
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index cfc1ae355..2f0abb436 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -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' ? '▲' : '▼')}
diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index 7229cd2d4..a32148ceb 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -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={
diff --git a/frontend-modern/src/index.css b/frontend-modern/src/index.css
index 36c540980..547670809 100644
--- a/frontend-modern/src/index.css
+++ b/frontend-modern/src/index.css
@@ -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 */