From 6861b2c0ebf90576fd6df6b68ea703a46b33ff73 Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Mon, 30 Mar 2026 10:10:55 +0200
Subject: [PATCH] fix(nav): prevent navbar items from wrapping to second line

- Set flex-wrap: nowrap on navbar-nav to keep all items in one row
- Add hidden overflow-x scroll (no visible scrollbar) as fallback
- Fix #navbar_logo taking up space when invisible via max-width transition

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/static/css/default.css | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/static/css/default.css b/app/static/css/default.css
index cab00cb..475617d 100644
--- a/app/static/css/default.css
+++ b/app/static/css/default.css
@@ -111,6 +111,19 @@ div#navbarNavfooter li.nav-item {
   margin-right: 6px;
 }
 
+/* Prevent nav items from wrapping to a second line */
+div#navbarNavheader .navbar-nav,
+div#navbarNavfooter .navbar-nav {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none; /* Firefox */
+}
+
+div#navbarNavheader .navbar-nav::-webkit-scrollbar,
+div#navbarNavfooter .navbar-nav::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
 main, footer, header, nav {
   position: relative;
   box-shadow: 
@@ -168,13 +181,16 @@ iframe{
 }
 
 #navbar_logo {
-  /* start invisible but in the layout (d-none will actually hide it) */
   opacity: 0;
-  transition: opacity var(--anim-duration) ease-in-out;
+  max-width: 0;
+  overflow: hidden;
+  transition: opacity var(--anim-duration) ease-in-out,
+              max-width var(--anim-duration) ease-in-out;
 }
 
 #navbar_logo.visible {
   opacity: 1 !important;
+  max-width: 300px;
 }