Refactored UI styles

Author: Alex Hoffmann

admin/index.html

@@ -68,9 +68,6 @@ <h1>MQTT SQL Admin</h1>
     </div>
     <div id="acl-tab" class="tab-content">
         <div class="content">
-            <div class="broker-section">
-                <div id="broker-summary"></div>
-            </div>
             <div class="broker-section">
                 <h3>📋 Clients</h3>
                 <div class="broker-content">
@@ -675,31 +672,11 @@ <h3>⚙️ Default ACL Access</h3>
                 window.aclDataLoaded = true;
             } catch (error) {
                 console.error('Error loading ACL config:', error);
-                document.getElementById('broker-summary').innerHTML = `
-                    <div class="error">Failed to load ACL configuration: ${error.message}</div>
-                `;
             }
         }
 
         function displayBrokerSummary(config) {
-            const clientCount = (config.clients || []).length;
-            const roleCount = (config.roles || []).length;
-            const groupCount = (config.groups || []).length;
-            
-            document.getElementById('broker-summary').innerHTML = `
-                <div class="summary-box">
-                    <div class="summary-label">Total Clients</div>
-                    <div class="summary-value">${clientCount}</div>
-                </div>
-                <div class="summary-box">
-                    <div class="summary-label">Total Roles</div>
-                    <div class="summary-value">${roleCount}</div>
-                </div>
-                <div class="summary-box">
-                    <div class="summary-label">Total Groups</div>
-                    <div class="summary-value">${groupCount}</div>
-                </div>
-            `;
+            // Summary statistics removed from UI
         }
 
         function displayClients(clients) {

admin/styles.css

@@ -52,7 +52,7 @@ body {
 header {
     background: var(--ctp-mantle);
     color: var(--ctp-text);
-    padding: 16px;
+    padding: 8px;
     text-align: center;
 }
 
@@ -107,7 +107,7 @@ header h1 {
 }
 
 .controls {
-    padding: 12px 24px;
+    padding: 8px 8px;
     background: var(--ctp-mantle);
     border-bottom: 1px solid var(--ctp-surface0);
     display: flex;
@@ -169,7 +169,7 @@ label {
 }
 
 input, select, button {
-    padding: 10px 14px;
+    padding: 8px 14px;
     border: 1px solid var(--ctp-surface2);
     border-radius: 2px;
     font-size: 14px;
@@ -195,7 +195,7 @@ input[type="text"] {
 }
 
 select {
-    min-width: 72px;
+    min-width: 64px;
 }
 
 input[type="text"]:focus, select:focus, textarea:focus {
@@ -264,7 +264,7 @@ button:disabled {
 }
 
 .content {
-    padding: 14px;
+    padding: 8px;
 }
 
 .query-builder {
@@ -593,5 +593,5 @@ td.actions {
 }
 
 #publishQos {
-    width: 80px;
+    width: 72px;
 }

dev/build.sh

@@ -26,7 +26,7 @@ IMAGE_NAME="mqtt-sql-admin"
 echo "Building $IMAGE_NAME version $VERSION..."
 
 # Build and tag with version
-docker build --no-cache -t "$IMAGE_NAME:$VERSION" -t "$IMAGE_NAME:latest" -f "$PROJECT_DIR/docker/Dockerfile" "$PROJECT_DIR"
+docker build -t "$IMAGE_NAME:$VERSION" -t "$IMAGE_NAME:latest" -f "$PROJECT_DIR/docker/Dockerfile" "$PROJECT_DIR"
 
 echo ""
 echo "Successfully built:"