Add 'Show less' button to usage table

src/gui/src/UI/Dashboard/TabUsage.js

@@ -94,6 +94,12 @@ const TabUsage = {
             usageTableExpanded = true;
             renderUsageTable();
         });
+
+        // Click handler for "Show less" to collapse the table
+        $($el_window).on('click', '.usage-table-show-less', function () {
+            usageTableExpanded = false;
+            renderUsageTable();
+        });
     },
 };
 
@@ -186,15 +192,19 @@ function renderUsageTable() {
         </div>`;
     }
 
+    // Add "Show less" button when expanded and there are more rows than the initial limit
+    if ( usageTableExpanded && hasMoreRows ) {
+        h += `<div class="usage-table-show-less-wrapper">
+            <button class="usage-table-show-less">Show less</button>
+        </div>`;
+    }
+
     h += '</div>';
 
     $('.driver-usage-details-content').html(h);
 }
 
 async function update_usage_details ($el_window) {
-    // Reset expanded state on refresh
-    usageTableExpanded = false;
-    
     // Add spinning animation and record start time
     const startTime = Date.now();
     $($el_window).find('.update-usage-details-icon').css('animation', 'spin 1s linear infinite');

src/gui/src/css/style.css

@@ -4653,6 +4653,42 @@ html.dark-mode .usage-table-fade-overlay {
     transform: translateY(0);
 }
 
+/* Show less button wrapper */
+.usage-table-show-less-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 12px 0 20px;
+}
+
+.usage-table-show-less {
+    background: transparent;
+    color: #6b7280;
+    border: 1px solid #d1d5db;
+    padding: 6px 16px;
+    border-radius: 5px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.usage-table-show-less:hover {
+    background: #f3f4f6;
+    border-color: #9ca3af;
+    color: #374151;
+}
+
+html.dark-mode .usage-table-show-less {
+    color: #9ca3af;
+    border-color: #4b5563;
+}
+
+html.dark-mode .usage-table-show-less:hover {
+    background: #374151;
+    border-color: #6b7280;
+    color: #d1d5db;
+}
+
 
 .driver-usage-details-content-table {
     width: 100%;