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;
     }
   }
 

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) => {

public/player.html

@@ -218,9 +218,9 @@
           <a href="picks.html" class="nav-link btn btn-outline-light me-2" id="nav-link-picks" style="display: none;">Mes picks</a>
           <a id="admin-control-link" href="control.html" class="nav-link btn btn-warning me-2 d-none">Admin</a>
         </div>
-        <div class="d-flex ms-auto mt-2 mt-lg-0 align-items-center gap-2 navbar-user">
-          <span id="user-name" class="navbar-text" data-user-name></span>
-          <button class="theme-toggle" type="button" data-theme-toggle role="switch" aria-checked="false" aria-label="Basculer le mode sombre">
+      <div class="d-flex ms-auto mt-2 mt-lg-0 align-items-center gap-2 navbar-user">
+        <span id="user-name" class="navbar-text" data-user-name></span>
+        <button class="theme-toggle" type="button" data-theme-toggle role="switch" aria-checked="false" aria-label="Basculer le mode sombre">
             <span class="theme-toggle-icon theme-toggle-icon-sun" aria-hidden="true">
               <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="12" cy="12" r="4"></circle>