From 21e44a8586e6a01aeff39d08698a8a3bb6e81121 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 04:56:44 -0400
Subject: [PATCH] Fix server sidebar collapsed state: hide badge and user
 footer text

- sidebar-env-badge hidden when collapsed
- sidebar-user-text collapses like nav link spans
- User icon stays centered when collapsed via sidebar-user-footer flex

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 server/templates/base.html | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/server/templates/base.html b/server/templates/base.html
index 709104c..7ca23e3 100644
--- a/server/templates/base.html
+++ b/server/templates/base.html
@@ -8,6 +8,14 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='yaris.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='fonts/fontawesome-all.min.css') }}">
+    <style>
+        /* Remote server badge: hide text when sidebar is collapsed */
+        .app-sidebar.collapsed .sidebar-env-badge { display: none; }
+        /* User footer: hide text, keep icon centered */
+        .sidebar-user-text { transition: opacity .15s; white-space: nowrap; }
+        .app-sidebar.collapsed .sidebar-user-text { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
+        .app-sidebar.collapsed .sidebar-user-footer { justify-content: center; padding: .5rem 0; }
+    </style>
     {% block styles %}{% endblock %}
 </head>
 
@@ -19,7 +27,7 @@
             <i class="fas fa-car sidebar-brand-icon"></i>
             <span class="sidebar-brand-text">Yaris OBD</span>
         </a>
-        <div class="px-3 pb-1">
+        <div class="px-3 pb-1 sidebar-env-badge">
             <span class="badge bg-warning text-dark w-100 text-center" style="font-size:.65rem;letter-spacing:.04em;">
                 <i class="fas fa-cloud fa-fw"></i> Remote server
             </span>
@@ -42,12 +50,15 @@
                 </a>
             </li>
         </ul>
-        <div class="px-3 pb-2 mt-auto text-muted" style="font-size:.75rem;">
-            <i class="fas fa-user fa-fw"></i> {{ current_user.username }}
-            &nbsp;·&nbsp;
-            <a href="{{ url_for('change_password_page') }}" class="text-muted">Password</a>
-            &nbsp;·&nbsp;
-            <a href="{{ url_for('logout') }}" class="text-muted">Logout</a>
+        <div class="px-3 pb-2 mt-auto text-muted d-flex align-items-center gap-1 sidebar-user-footer" style="font-size:.75rem;">
+            <i class="fas fa-user fa-fw flex-shrink-0"></i>
+            <span class="sidebar-user-text">
+                {{ current_user.username }}
+                &nbsp;·&nbsp;
+                <a href="{{ url_for('change_password_page') }}" class="text-muted">Password</a>
+                &nbsp;·&nbsp;
+                <a href="{{ url_for('logout') }}" class="text-muted">Logout</a>
+            </span>
         </div>
         <button class="sidebar-collapse-btn" id="sidebarToggle" type="button" aria-label="Collapse sidebar">
             <i class="fas fa-chevron-left"></i>