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 <[email protected]>

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>