Mkae columns sortabel agian, check hbc version, provide modile html pages

hbd/server/templates/alerts.html

@@ -24,55 +24,40 @@
     }
 
     .summary-cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
-      margin-bottom: 30px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-bottom: 16px;
     }
 
     .summary-card {
       background: white;
-      border-radius: 8px;
-      padding: 20px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      text-align: center;
+      border-radius: 6px;
+      padding: 6px 14px;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-left: 4px solid #ddd;
     }
 
-    .summary-card.critical {
-      border-left: 5px solid #f44336;
-    }
-
-    .summary-card.warning {
-      border-left: 5px solid #ff9800;
-    }
-
-    .summary-card.ok {
-      border-left: 5px solid #4caf50;
-    }
+    .summary-card.critical { border-left-color: #f44336; }
+    .summary-card.warning  { border-left-color: #ff9800; }
+    .summary-card.ok       { border-left-color: #4caf50; }
 
     .summary-number {
-      font-size: 3em;
+      font-size: 1.4em;
       font-weight: bold;
-      margin: 10px 0;
+      line-height: 1;
     }
 
-    .summary-number.critical {
-      color: #f44336;
-    }
-
-    .summary-number.warning {
-      color: #ff9800;
-    }
-
-    .summary-number.ok {
-      color: #4caf50;
-    }
+    .summary-number.critical { color: #f44336; }
+    .summary-number.warning  { color: #ff9800; }
+    .summary-number.ok       { color: #4caf50; }
 
     .summary-label {
       color: #666;
-      text-transform: uppercase;
-      font-size: 0.9em;
-      letter-spacing: 1px;
+      font-size: 0.85em;
     }
 
     .filters {