diff --git a/public/css/style.css b/public/css/style.css
index 61eb65d..d2ef985 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -2043,9 +2043,15 @@ input:checked+.slider:before {
   .chart-card-header {
     padding: 14px 14px 0;
     flex-wrap: wrap;
+    align-items: center;
     gap: 8px;
   }
 
+  #networkChart .chart-card-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   .chart-title {
     font-size: 0.82rem;
   }
@@ -2207,10 +2213,20 @@ input:checked+.slider:before {
 
   .metric-item-header {
     padding: 10px 12px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .metric-label-group {
+    flex-wrap: wrap;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
   }
 
   .metric-label {
     font-size: 0.85rem;
+    white-space: normal;
   }
 
   .metric-value {
@@ -2469,13 +2485,16 @@ input:checked+.slider:before {
 
   /* -- Chart card header vertical layout -- */
   .chart-card-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
   }
 
   .chart-header-right {
-    width: 100%;
+    width: auto;
+    flex: 1;
+    justify-content: flex-end;
   }
 
   /* -- Traffic footer compact -- */
@@ -2524,6 +2543,24 @@ input:checked+.slider:before {
   .chart-legend {
     flex-wrap: wrap;
   }
+
+  #serverSearchFilter {
+    width: 100%;
+    min-width: 80px;
+    max-width: 100px;
+  }
+
+  #serverSearchFilter:focus {
+    max-width: 130px;
+  }
+
+  .source-select {
+    max-width: 80px;
+  }
+
+  .detail-info-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* ---- Globe Card Expansion ---- */