From 0ae3af13f162dfd6b3a76dbd34032e3dba78995a Mon Sep 17 00:00:00 2001 From: Mathieu Moran Date: Mon, 26 Jan 2026 19:27:57 -0500 Subject: [PATCH] Adjust mobile navbar user layout Center the username between the toggle and sign-out on mobile and remove hard name truncation. --- public/css/app.css | 41 ++++++++++++++++++++++++++---------- public/js/app_header_boot.js | 5 +---- public/player.html | 6 +++--- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/public/css/app.css b/public/css/app.css index 1957dc5..7b57f14 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -750,27 +750,46 @@ footer { padding-top: 0.85rem; /* Mobile divider between nav buttons and user row */ border-top: 1px solid rgba(255, 255, 255, 0.18); - flex-wrap: wrap; - justify-content: space-between; } .navbar-custom .navbar-user-name-mobile { - max-width: 42vw; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-right: 0.75rem; - margin-right: 0.75rem !important; /* extra gap before hamburger */ - border-right: 1px solid rgba(255, 255, 255, 0.18); + display: none; + } + + .navbar-custom .navbar-user { + display: grid !important; + grid-template-columns: auto 1fr auto; + grid-template-areas: "toggle name logout"; + align-items: center; + align-content: center; + justify-content: stretch; + justify-items: stretch; + column-gap: 0.5rem; } - /* Avoid showing the username twice when the menu is open */ .navbar-custom .navbar-user #user-name { - display: none; + display: inline-flex; + min-width: 0; + width: 100%; + max-width: 45vw; + font-size: clamp(0.75rem, 3.2vw, 0.95rem); + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + justify-self: stretch; + grid-area: name; } .navbar-custom .navbar-user .theme-toggle { margin-right: 0 !important; + justify-self: start; + grid-area: toggle; + } + + .navbar-custom .navbar-user #log-off { + justify-self: end; + grid-area: logout; } } diff --git a/public/js/app_header_boot.js b/public/js/app_header_boot.js index 2ab0504..0cfedb6 100644 --- a/public/js/app_header_boot.js +++ b/public/js/app_header_boot.js @@ -42,10 +42,7 @@ } const name = decoded.name || ''; - const maxNameLength = 15; - const displayName = name.length > maxNameLength - ? name.slice(0, Math.max(0, maxNameLength - 3)) + '...' - : name; + const displayName = name; const nameTargets = document.querySelectorAll('[data-user-name]'); if (nameTargets.length) { nameTargets.forEach((el) => { diff --git a/public/player.html b/public/player.html index 142c2b2..ec8658e 100644 --- a/public/player.html +++ b/public/player.html @@ -218,9 +218,9 @@ Admin -
- -