From 650cc6f1b50af7651e1f3e5eec584de2ba1a477e Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Mon, 6 Apr 2026 16:21:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/style.css | 61 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 5c5eed7..2cff3e3 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -2212,25 +2212,33 @@ input:checked+.slider:before {
   }
 
   .metric-item-header {
-    padding: 10px 12px;
-    flex-wrap: wrap;
-    gap: 8px;
+    padding: 10px 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: nowrap; /* Force single line as requested */
   }
 
   .metric-label-group {
-    flex-wrap: wrap;
-    gap: 6px;
-    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: nowrap;
     min-width: 0;
   }
 
   .metric-label {
-    font-size: 0.85rem;
-    white-space: normal;
+    font-size: 0.82rem;
+    white-space: nowrap; /* Don't wrap */
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .metric-value {
-    font-size: 0.88rem;
+    font-size: 0.85rem;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .chart-controls {
@@ -2460,6 +2468,41 @@ input:checked+.slider:before {
     height: 160px;
   }
 
+  .source-select {
+    display: none !important;
+  }
+
+  .server-table th,
+  .server-table td {
+    white-space: nowrap;
+  }
+
+  /* Server Detail Modal Full Screen for better fit on phone */
+  #serverDetailModal .modal {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    border-radius: 0 !important;
+    margin: 0 !important;
+    top: 0 !important;
+    left: 0 !important;
+    transform: none !important;
+  }
+
+  #serverDetailModal .modal-body {
+    max-height: calc(100vh - 60px) !important;
+  }
+
+  /* Metric titles no wrap (as requested) */
+  .metric-item-header, .metric-label-group {
+    flex-wrap: nowrap !important;
+  }
+
+  .metric-label {
+    white-space: nowrap !important;
+  }
+
   /* -- Modal full width -- */
   .modal {
     width: 100%;