From f2d83c26a79607a1dcabcd374a5ad41f3fb9d10d Mon Sep 17 00:00:00 2001
From: "courtmanr@gmail.com" <courtmanr@gmail.com>
Date: Thu, 24 Apr 2025 21:14:41 +0100
Subject: [PATCH] fix(ui): Standardize all table headers to left-align (#53)

---
 src/public/app.js     |  8 ++++----
 src/public/index.html | 28 ++++++++++++++--------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/public/app.js b/src/public/app.js
index f08905abb..8bcb3af70 100644
--- a/src/public/app.js
+++ b/src/public/app.js
@@ -767,10 +767,10 @@ document.addEventListener('DOMContentLoaded', function() {
           <th class="text-left p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-3/12">Storage</th>
           <th class="text-left p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-2/12">Content</th>
           <th class="text-left p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-1/12">Type</th>
-          <th class="text-center p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-[80px]">Shared</th>
+          <th class="text-left p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-[80px]">Shared</th>
           <th class="text-left p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-[150px]">Usage</th>
-          <th class="text-right p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-1/12">Avail</th>
-          <th class="text-right p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-1/12">Total</th>
+          <th class="text-left p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-1/12">Avail</th>
+          <th class="text-left p-2 px-3 font-semibold text-gray-700 dark:text-gray-300 w-1/12">Total</th>
         </tr>
       `;
     table.appendChild(thead);
@@ -1724,7 +1724,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 <thead class="text-xs text-gray-700 dark:text-gray-300 uppercase bg-gray-100 dark:bg-gray-700/50 sticky top-0"> 
                     <tr>
                         <th scope="col" class="px-4 py-2 text-left font-semibold">${idColumnHeader}</th>
-                        <th scope="col" class="px-4 py-2 text-center font-semibold">Status</th>
+                        <th scope="col" class="px-4 py-2 text-left font-semibold">Status</th>
                         <th scope="col" class="px-4 py-2 text-left font-semibold">Start Time</th>
                         <th scope="col" class="px-4 py-2 text-left font-semibold">Duration</th>
                         <th scope="col" class="px-4 py-2 text-left font-semibold">UPID</th>
diff --git a/src/public/index.html b/src/public/index.html
index 686c6947a..c700b2bd7 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -97,11 +97,11 @@
             <tr>
               <th scope="col" class="sortable px-6 py-3 w-1/12 text-left font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="status">Status</th>
               <th scope="col" class="sortable px-6 py-3 w-3/12 text-left font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="node">Node Name</th>
-              <th scope="col" class="sortable px-6 py-3 w-2/12 text-right font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="cpu">CPU</th>
-              <th scope="col" class="sortable px-6 py-3 w-2/12 text-right font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="memory">Mem</th>
-              <th scope="col" class="sortable px-6 py-3 w-2/12 text-right font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="disk">Disk</th>
-              <th scope="col" class="sortable px-6 py-3 w-1/12 text-right font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="uptime">Uptime</th>
-              <th scope="col" class="sortable px-6 py-3 w-1/12 text-right font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="loadnorm">Load (Norm)</th>
+              <th scope="col" class="sortable px-6 py-3 w-2/12 text-left font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="cpu">CPU</th>
+              <th scope="col" class="sortable px-6 py-3 w-2/12 text-left font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="memory">Mem</th>
+              <th scope="col" class="sortable px-6 py-3 w-2/12 text-left font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="disk">Disk</th>
+              <th scope="col" class="sortable px-6 py-3 w-1/12 text-left font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="uptime">Uptime</th>
+              <th scope="col" class="sortable px-6 py-3 w-1/12 text-left font-semibold cursor-pointer select-none whitespace-nowrap" data-sort="loadnorm">Load (Norm)</th>
             </tr>
           </thead>
           <tbody id="nodes-table-body" class="divide-y divide-gray-200 dark:divide-gray-700">
@@ -180,15 +180,15 @@
               <!-- Header cells with Tailwind classes -->
               <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="name">Name</th>
               <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="type">Type</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="id">ID</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="uptime">Uptime</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="cpu">CPU</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="memory">Mem</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="disk">Disk</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="diskread">Disk Read</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="diskwrite">Disk Write</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="netin">Net In</th>
-              <th class="sortable text-right p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="netout">Net Out</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="id">ID</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="uptime">Uptime</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="cpu">CPU</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="memory">Mem</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="disk">Disk</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="diskread">Disk Read</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="diskwrite">Disk Write</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="netin">Net In</th>
+              <th class="sortable text-left p-1 px-2 font-semibold text-gray-700 dark:text-gray-300 cursor-pointer select-none whitespace-nowrap" data-sort="netout">Net Out</th>
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">