From 4ae5dfb8a3e3052bdf04877e942ce5ddc56a4564 Mon Sep 17 00:00:00 2001
From: UNITRONIX <36471318+UNITRONIX@users.noreply.github.com>
Date: Sat, 5 Sep 2026 16:06:36 +0200
Subject: [PATCH] fix(ui): center UX 3.5 topbar icons and tighten Settings
 mobile tabs

Address #396 retest: vertically center menu/logo in the topbar, drop extra Settings track padding, and tighten the page-header gap on phone without changing sticky bleed. Move the sticky changelog entry to 3.5.70.

Refs #396

Thanks: INSOLVE (Honorary); Marco Jakobs (@jacotec); MyNameisStitch (@MyNameisStitch); Redspin (@playerumpknow)
---
 CHANGELOG.md                           |  7 +++--
 web-nodejs/public/css/mobile-shell.css |  5 ++++
 web-nodejs/public/css/pages.css        |  5 ++++
 web-nodejs/public/css/ux35.css         | 39 +++++++++++++++++++++++---
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 622ad7f3..6fa45de0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ### Fixed
 - **Web Remote → WebSocket Mode relay pairing (#397 follow-up):** hbbr now bridges mixed TCP (`:21117`) ↔ WS (`:21119`) sessions with BytesCodec↔message translation (16 MiB peer-frame cap), so panel Web Remote can complete relay to WS-mode peers. Signal exemption for `panel-web-remote` alone was insufficient — pairing previously failed with `Protocol mismatch … tcp <-> ws`. Ships via Go relay restart / panel update.
+- **Settings mobile topbar + tab chrome (#396 follow-up):** UX 3.5 menu/logo icons are vertically centered in the topbar; Settings tab track drops extra bottom padding and phone viewports tighten the page-header→tabs gap (sticky bleed unchanged). Ships via panel update. Verify: ≤767px UX 3.5 → hamburger/logo aligned in the 48px topbar; Settings tabs compact with no empty strip under the underline; scroll still keeps tabs flush under the content top.
 
 ### Changed
 - _(none yet)_
@@ -67,6 +68,9 @@
 
 ## [3.5.70] — 2026-08-30
 
+### Fixed
+- **Settings tab bar sticky + mobile (#396):** Settings horizontal tabs stay flush under the top of the content scroll area (bleed cancels content padding), keep sticky on narrow/mobile instead of scrolling away, and scroll the active tab into view when switching or opening a hash link. Ships via panel update. Verify: Settings → scroll a long form → tab bar flush at top; ≤900px / mobile → tabs remain visible while scrolling; `/settings#updates` brings Updates into the horizontal track.
+
 ### Changed
 - _(none yet)_
 
@@ -77,9 +81,6 @@
 ### Added
 - **Custom download portal product label (#386):** Agent Generator advanced branding can override or hide the product type line (`download.product_*`) on the public download page without rebuilding installers.
 
-### Fixed
-- **Settings tab bar sticky + mobile (#396):** Settings horizontal tabs stay flush under the top of the content scroll area (bleed cancels content padding), keep sticky on narrow/mobile instead of scrolling away, and scroll the active tab into view when switching or opening a hash link. Ships via panel update. Verify: Settings → scroll a long form → tab bar flush at top; ≤900px / mobile → tabs remain visible while scrolling; `/settings#updates` brings Updates into the horizontal track.
-
 ### Changed
 - _(none yet)_
 
diff --git a/web-nodejs/public/css/mobile-shell.css b/web-nodejs/public/css/mobile-shell.css
index 5ea90be1..ea4fe05d 100644
--- a/web-nodejs/public/css/mobile-shell.css
+++ b/web-nodejs/public/css/mobile-shell.css
@@ -481,6 +481,11 @@ body.ux35-page .mobile-bottom-nav {
         padding-bottom: var(--space-xs);
     }
 
+    /* Settings sticky track: no extra bottom padding (compact under topbar) */
+    body.app-page.is-mobile-shell .settings-shell-nav-track {
+        padding-bottom: 0;
+    }
+
     body.app-page.is-mobile-shell .settings-shell-nav-track::-webkit-scrollbar,
     body.app-page.is-mobile-shell .settings-tabs::-webkit-scrollbar,
     body.app-page.is-mobile-shell .server-mgmt-tabs::-webkit-scrollbar {
diff --git a/web-nodejs/public/css/pages.css b/web-nodejs/public/css/pages.css
index 371630df..461d3b04 100644
--- a/web-nodejs/public/css/pages.css
+++ b/web-nodejs/public/css/pages.css
@@ -3324,6 +3324,11 @@
     -webkit-overflow-scrolling: touch;
 }
 
+/* Settings track: no extra bottom padding from .mobile-tabs-scroll (keeps bar compact) */
+.settings-shell-nav-track.mobile-tabs-scroll {
+    padding-bottom: 0;
+}
+
 .settings-shell-nav .settings-shell-tab,
 .settings-shell-nav .settings-tab {
     display: flex;
diff --git a/web-nodejs/public/css/ux35.css b/web-nodejs/public/css/ux35.css
index 9933d63e..0d6b885f 100644
--- a/web-nodejs/public/css/ux35.css
+++ b/web-nodejs/public/css/ux35.css
@@ -70,14 +70,27 @@ body.app-page.ux35-page {
     white-space: nowrap;
     color: inherit;
     text-decoration: none;
+    min-height: var(--ux35-control-size);
 }
 
-.ux35-topbar-logo .material-icons { font-size: 22px; }
-.ux35-topbar-logo img { height: 24px; width: auto; }
+.ux35-topbar-logo .material-icons {
+    font-size: 22px;
+    line-height: 1;
+    width: 22px;
+    height: 22px;
+}
+.ux35-topbar-logo img { height: 24px; width: auto; display: block; }
+.ux35-topbar-logo .sidebar-logo-svg {
+    display: flex;
+    align-items: center;
+    line-height: 0;
+}
 .ux35-topbar-logo .brand-text-accent { opacity: 0.85; }
 
 .ux35-topbar-menu-btn {
     display: none;
+    align-items: center;
+    justify-content: center;
     min-width: var(--ux35-control-size);
     min-height: var(--ux35-control-size);
     background: none;
@@ -88,7 +101,12 @@ body.app-page.ux35-page {
     cursor: pointer;
 }
 .ux35-topbar-menu-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--ux35-topbar-fg); }
-.ux35-topbar-menu-btn .material-icons { font-size: 22px; }
+.ux35-topbar-menu-btn .material-icons {
+    font-size: 22px;
+    line-height: 1;
+    width: 22px;
+    height: 22px;
+}
 
 .ux35-topbar-breadcrumb {
     display: flex;
@@ -132,11 +150,15 @@ body.app-page.ux35-page {
     cursor: pointer;
     display: flex;
     align-items: center;
+    justify-content: center;
     position: relative;
     transition: background var(--ux35-motion-fast), color var(--ux35-motion-fast);
 }
 .ux35-topbar-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--ux35-topbar-fg); }
-.ux35-topbar-btn .material-icons { font-size: 20px; }
+.ux35-topbar-btn .material-icons {
+    font-size: 20px;
+    line-height: 1;
+}
 
 /* Keyboard focus uses the active brand color without relying on hover. */
 .ux35-topbar-btn:focus-visible,
@@ -580,6 +602,11 @@ body.ux35-is-resizing {
         padding: var(--ux35-content-padding);
         padding-bottom: calc(var(--ux35-content-padding) + 72px);
     }
+    /* Tighten header→tabs gap on phone; bleed still cancels content padding when sticky */
+    .ux35-page .ux35-content > .page-header,
+    .ux35-page .ux35-content > .settings-header {
+        margin-bottom: var(--ux35-space-3);
+    }
     .ux35-page .settings-shell-nav {
         --settings-nav-bleed: var(--ux35-content-padding);
         --settings-nav-bleed-x: var(--ux35-content-padding);
@@ -598,6 +625,10 @@ body.ux35-is-resizing {
         width: 18px;
         height: 18px;
     }
+    .ux35-page .settings-shell-nav-track.mobile-tabs-scroll {
+        padding-bottom: 0;
+        gap: 4px;
+    }
     .ux35-sidebar {
         width: min(86vw, 280px);
         min-width: min(86vw, 280px);