From 40ffe3656e72195b7e60e563ca352de769f7b472 Mon Sep 17 00:00:00 2001
From: Ivo Oskamp <ivooskamp@oskamp.info>
Date: Mon, 23 Feb 2026 14:41:11 +0100
Subject: [PATCH] Fix navbar overflow on split-screen desktop layouts

---
 .../backupchecks/src/static/css/layout.css    | 40 +++++++++++++++++++
 .../src/templates/layout/base.html            | 12 +++---
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/containers/backupchecks/src/static/css/layout.css b/containers/backupchecks/src/static/css/layout.css
index e1afe54..52a2a69 100644
--- a/containers/backupchecks/src/static/css/layout.css
+++ b/containers/backupchecks/src/static/css/layout.css
@@ -87,3 +87,43 @@ main.dashboard-container {
   margin-left: 0;
   color: rgba(0, 0, 0, 0.7);
 }
+
+/* Navbar responsive behavior for split-screen/half-width desktop layouts */
+@media (max-width: 1399.98px) {
+  .navbar .navbar-collapse {
+    align-items: stretch;
+  }
+
+  .navbar .navbar-search {
+    width: 100%;
+    margin-right: 0 !important;
+  }
+
+  .navbar .navbar-search .form-control {
+    width: 100%;
+    min-width: 0 !important;
+  }
+
+  .navbar .navbar-userinfo {
+    display: block;
+    margin-right: 0 !important;
+    margin-bottom: 0.5rem;
+  }
+
+  .navbar .navbar-role-form,
+  .navbar .navbar-theme-form {
+    width: 100%;
+    margin-right: 0 !important;
+    margin-bottom: 0.5rem;
+  }
+
+  .navbar .navbar-role-form .form-select,
+  .navbar .navbar-theme-form .form-select {
+    width: 100% !important;
+    min-width: 0 !important;
+  }
+
+  .navbar .navbar-logout-btn {
+    width: 100%;
+  }
+}
diff --git a/containers/backupchecks/src/templates/layout/base.html b/containers/backupchecks/src/templates/layout/base.html
index bf87e06..714408a 100644
--- a/containers/backupchecks/src/templates/layout/base.html
+++ b/containers/backupchecks/src/templates/layout/base.html
@@ -59,7 +59,7 @@
     </div>
     {% endif %}
 
-    <nav class="navbar navbar-expand-lg fixed-top bg-body-tertiary border-bottom">
+    <nav class="navbar navbar-expand-xxl fixed-top bg-body-tertiary border-bottom">
       <div class="container-fluid">
         <a class="navbar-brand" href="{{ url_for('main.dashboard') }}">Backupchecks</a>
         <button
@@ -162,7 +162,7 @@
             </li>
             {% endif %}
           </ul>
-          <form method="get" action="{{ url_for('main.search_page') }}" class="d-flex me-3 mb-2 mb-lg-0" role="search" autocomplete="off">
+          <form method="get" action="{{ url_for('main.search_page') }}" class="navbar-search d-flex me-3 mb-2 mb-xxl-0" role="search" autocomplete="off">
             <input
               class="form-control form-control-sm me-2"
               type="search"
@@ -174,14 +174,14 @@
             />
             <button class="btn btn-outline-secondary btn-sm" type="submit">Search</button>
           </form>
-          <span class="navbar-text me-3">
+          <span class="navbar-text me-3 navbar-userinfo">
             <a class="text-decoration-none" href="{{ url_for('main.user_settings') }}">
               {{ current_user.username }} ({{ active_role }})
             </a>
           </span>
           
           {% if current_user.is_authenticated and user_roles|length > 1 %}
-          <form method="post" action="{{ url_for('main.set_active_role_route') }}" class="me-2">
+          <form method="post" action="{{ url_for('main.set_active_role_route') }}" class="me-2 navbar-role-form">
             <select
               class="form-select form-select-sm"
               name="active_role"
@@ -195,7 +195,7 @@
             </select>
           </form>
           {% endif %}
-<form method="post" action="{{ url_for('main.set_theme_preference') }}" class="me-2">
+<form method="post" action="{{ url_for('main.set_theme_preference') }}" class="me-2 navbar-theme-form">
             <select
               class="form-select form-select-sm"
               name="theme"
@@ -208,7 +208,7 @@
               <option value="auto" {% if _theme_pref == 'auto' %}selected{% endif %}>Auto</option>
             </select>
           </form>
-          <a class="btn btn-outline-secondary" href="{{ url_for('auth.logout') }}">Logout</a>
+          <a class="btn btn-outline-secondary navbar-logout-btn" href="{{ url_for('auth.logout') }}">Logout</a>
           {% endif %}
         </div>
       </div>