Merge pull request #84 from quoije/2026

Adjust mobile navbar user layout

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;
+      display: none;
-      overflow: hidden;
+    }
-      text-overflow: ellipsis;
+
-      white-space: nowrap;
+    .navbar-custom .navbar-user {
-      padding-right: 0.75rem;
+      display: grid !important;
-      margin-right: 0.75rem !important; /* extra gap before hamburger */
+      grid-template-columns: auto 1fr auto;
-      border-right: 1px solid rgba(255, 255, 255, 0.18);
+      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;
     }
   }
 

public/js/app_header_boot.js

@@ -42,10 +42,7 @@
   }
 
   const name = decoded.name || '';
-  const maxNameLength = 15;
+  const displayName = name;
-  const displayName = name.length > maxNameLength
-    ? name.slice(0, Math.max(0, maxNameLength - 3)) + '...'
-    : name;
   const nameTargets = document.querySelectorAll('[data-user-name]');
   if (nameTargets.length) {
     nameTargets.forEach((el) => {