From 5e6d017f973b35e403da18365ac6784f95348f89 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 18:15:21 -0500
Subject: [PATCH] refactor: improve resource allocation card layout and styling
 for better readability

---
 .../Servers/Proxmox/views/overview.blade.php  | 65 ++++++-------------
 1 file changed, 19 insertions(+), 46 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 92cb24973..94e45f197 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -311,66 +311,39 @@
         $lastSampleTimestamp = now()->toIso8601String();
     @endphp
 
-    <!-- Resource Allocation Cards -->
-    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem;">
+    <!-- Resource Stats Grid -->
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.5rem;">
         @foreach($resourceAllocations as $resource)
-        <div class="lte-card" style="margin-bottom: 0; overflow: hidden;">
-            <div class="lte-card-body" style="padding: 1.5rem;">
-                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
-                    <h5 style="font-size: 0.875rem; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.05em;" class="lte-text-muted">{{ $resource['label'] }}</h5>
+        <div class="lte-card" style="margin-bottom: 0;">
+            <div class="lte-card-body" style="padding: 1.25rem;">
+                <div style="display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem;">
+                    <div>
+                        <h6 style="font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.5rem 0;" class="lte-text-muted">{{ $resource['label'] }}</h6>
+                        <div style="font-size: 1.5rem; font-weight: 700; line-height: 1;">{{ $resource['usage_summary'] }}</div>
+                    </div>
                     @if(isset($resource['badge']))
-                    <span class="lte-badge lte-badge-{{ $resource['badge']['label'] === 'Healthy' ? 'success' : ($resource['badge']['label'] === 'Watchlist' ? 'warning' : 'danger') }}" style="font-size: 0.7rem; padding: 0.25rem 0.5rem;">
+                    <span class="lte-badge lte-badge-{{ $resource['badge']['label'] === 'Healthy' ? 'success' : ($resource['badge']['label'] === 'Watchlist' ? 'warning' : 'danger') }}" style="font-size: 0.65rem;">
                         {{ $resource['badge']['label'] }}
                     </span>
                     @endif
                 </div>
-
-                <div style="margin-bottom: 1rem;">
-                    <div style="font-size: 1.75rem; font-weight: 700; line-height: 1; margin-bottom: 0.25rem;">
-                        {{ $resource['usage_summary'] }}
-                    </div>
-                    <p class="lte-text-muted" style="font-size: 0.75rem; margin: 0;">{{ $resource['entitlement_label'] }}</p>
-                </div>
-
+                
                 @if($resource['used_percent'] !== null)
-                <div style="margin-bottom: 0.75rem;">
-                    <div class="lte-progress" style="height: 8px; border-radius: 10px;">
-                        <div class="lte-progress-bar" role="progressbar" 
-                             style="width: {{ min(100, $resource['used_percent']) }}%; background: {{ $resource['gradient'] }}; border-radius: 10px;"
-                             aria-valuenow="{{ $resource['used_percent'] }}" 
-                             aria-valuemin="0" 
-                             aria-valuemax="100">
-                        </div>
-                    </div>
-                    <div style="display: flex; justify-content: space-between; margin-top: 0.375rem;">
-                        <span class="lte-text-muted" style="font-size: 0.75rem;">{{ number_format($resource['used_percent'], 1) }}% used</span>
-                        @if($resource['used_percent'] > 100)
-                        <span class="lte-text-danger" style="font-size: 0.75rem; font-weight: 600;">Over entitlement</span>
-                        @endif
-                    </div>
+                <div class="lte-progress" style="height: 6px; margin-bottom: 0.5rem;">
+                    <div class="lte-progress-bar" style="width: {{ min(100, $resource['used_percent']) }}%; background: {{ $resource['gradient'] }};" role="progressbar"></div>
                 </div>
+                <div style="font-size: 0.75rem;" class="lte-text-muted">{{ number_format($resource['used_percent'], 1) }}% of {{ $resource['entitlement_label'] }}</div>
+                @else
+                <div style="font-size: 0.75rem; margin-top: 0.5rem;" class="lte-text-muted">{{ $resource['entitlement_label'] }}</div>
                 @endif
-
-                <p class="lte-text-muted" style="font-size: 0.75rem; margin: 0; line-height: 1.4;">
-                    <x-ri-information-line class="size-3" style="display: inline; vertical-align: text-top; margin-right: 0.25rem;" />
-                    {{ $resource['description'] }}
-                </p>
             </div>
         </div>
         @endforeach
     </div>
 
-    <!-- Main Content Grid -->
-    <div style="display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem;">
-        @media (min-width: 768px) {
-            <style>
-                .overview-grid { grid-template-columns: 1fr 1fr; }
-            </style>
-        }
-    </div>
-    
-    <div class="overview-grid" style="display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem;">
-        <!-- Server Details Card -->
+    <!-- Main Grid Layout -->
+    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;">
+        <!-- Server Information Card -->
         <div class="lte-card lte-card-outline-primary">
             <div class="lte-card-header" style="background: linear-gradient(135deg, var(--lte-primary), var(--lte-info)); color: white; padding: 1rem 1.25rem;">
                 <div class="lte-card-title" style="display: flex; align-items: center; gap: 0.75rem; margin: 0; font-weight: 600;">