From 2bae3041072736b34b5cf381894397804847249a Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sat, 25 Apr 2026 13:54:18 +0300
Subject: [PATCH] fix(ui): single-row header + readable sidebar labels at
 narrow widths
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

At ≤1100px the header grid only declared 3 tracks for 4 children, so
the toolbar wrapped to a second row, doubling the header height. Add a
4th track, tighten the meta cluster, and hide non-essential toolbar
items (API link, tour-restart) so everything fits in one row. At
≤900px drop CPU/Mem cells (Uptime + Poll remain) so the toolbar still
fits beside the meta cluster.

Sidebar tab captions on the 56 px icon rail were ellipsis-truncated to
"DASHBO…" / "AUTOMA…" / "INTEGR…". Switch to a 2-line clamp with
tighter font/tracking so each label renders in full.
---
 server/src/ledgrab/static/css/layout.css  | 49 ++++++++++++++++++++++-
 server/src/ledgrab/static/css/sidebar.css | 19 ++++++---
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/server/src/ledgrab/static/css/layout.css b/server/src/ledgrab/static/css/layout.css
index bf8d163..03f7674 100644
--- a/server/src/ledgrab/static/css/layout.css
+++ b/server/src/ledgrab/static/css/layout.css
@@ -1120,8 +1120,10 @@ h2 {
    the sidebar hides entirely and mobile.css reverts .tab-bar to a fixed
    bottom strip. */
 @media (max-width: 1100px) {
+    /* Keep all four header children (title | center | meta | toolbar) on one
+       row. Without an explicit 4th track they wrap, doubling the header. */
     header {
-        grid-template-columns: var(--sidebar-width, 56px) 1fr auto;
+        grid-template-columns: var(--sidebar-width, 56px) auto 1fr auto;
     }
     .header-title {
         padding: 0 10px;
@@ -1134,7 +1136,28 @@ h2 {
         display: none;
     }
     .transport-center {
-        padding: 0 12px;
+        padding: 0 10px;
+    }
+    /* Tighter meta cluster — drop the trailing separator and shrink gaps */
+    .transport-meta {
+        gap: 10px;
+        padding: 0 4px 0 8px;
+        justify-content: flex-end;
+    }
+    .transport-meta .meta-sep:last-child {
+        display: none;
+    }
+    /* Tighter toolbar so it fits beside the meta cluster */
+    .header-toolbar {
+        gap: 2px;
+    }
+    .header-toolbar-sep {
+        margin: 0 2px;
+    }
+    /* Hide secondary header items at narrow widths to free room */
+    .header-link,
+    #tour-restart-btn {
+        display: none;
     }
 
     .container {
@@ -1142,6 +1165,23 @@ h2 {
     }
 }
 
+/* Tablet/phone shoulder: the meta cluster still wants ~280px which collides
+   with the toolbar below 900px. Drop CPU + Mem cells (Uptime + Poll stay,
+   they're the most useful at-a-glance signals). */
+@media (max-width: 900px) {
+    #transport-cpu,
+    #transport-mem {
+        display: none;
+    }
+    .transport-meta .meta-cell:has(#transport-cpu),
+    .transport-meta .meta-cell:has(#transport-mem) {
+        display: none;
+    }
+    .transport-meta > .meta-sep:nth-of-type(1) {
+        display: none;
+    }
+}
+
 @media (max-width: 600px) {
     header {
         grid-template-columns: auto 1fr auto;
@@ -1154,6 +1194,11 @@ h2 {
     .transport-center {
         display: none;
     }
+    /* Below the phone breakpoint the sidebar vanishes and the bottom tab
+       bar takes over, so most of the meta cluster goes too. */
+    .transport-meta {
+        display: none;
+    }
     .container {
         padding: 10px;
     }
diff --git a/server/src/ledgrab/static/css/sidebar.css b/server/src/ledgrab/static/css/sidebar.css
index 3687088..18497d6 100644
--- a/server/src/ledgrab/static/css/sidebar.css
+++ b/server/src/ledgrab/static/css/sidebar.css
@@ -243,19 +243,28 @@
 
     .sidebar .tab-btn {
         grid-template-columns: 1fr;
-        padding: 10px 0;
+        padding: 10px 2px;
         justify-content: center;
         justify-items: center;
-        gap: 2px;
+        gap: 3px;
     }
+    /* Two-line caption with tight tracking — single-line ellipsis truncates
+       longer labels like "Automations"/"Integrations" to "AUTOMA…" which
+       isn't recoverable; two short lines are uglier per word but legible. */
     .sidebar .tab-btn > span[data-i18n] {
-        font-size: 0.55rem;
-        letter-spacing: 0.05em;
+        font-size: 0.46rem;
+        letter-spacing: 0.02em;
+        line-height: 1.1;
         text-transform: uppercase;
         color: inherit;
         max-width: 100%;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        text-align: center;
         overflow: hidden;
-        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
     }
     .sidebar .tab-btn .icon {
         width: 20px;