From f6650fafdb1bcc1d6fd9b088524b79f580e8e773 Mon Sep 17 00:00:00 2001
From: Edwin Noorlander <edwin@noorlander.info>
Date: Tue, 11 Aug 2026 11:36:48 +0200
Subject: [PATCH] Remove dropdown borders, auto-width to content, nowrap items

- border: none on all dropdown-menu (no borders)
- min-width: 0 (width adapts to longest item title)
- white-space: nowrap on dropdown-item
- Remove border-left on mobile submenus
---
 themes/default/assets/css/theme.css          | 15 +++++++--------
 themes/default/assets/css_compiled/theme.css | 15 +++++++--------
 themes/default/assets/scss/theme.scss        | 17 +++++++----------
 3 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/themes/default/assets/css/theme.css b/themes/default/assets/css/theme.css
index 10095d6..1aa63e4 100644
--- a/themes/default/assets/css/theme.css
+++ b/themes/default/assets/css/theme.css
@@ -70,15 +70,17 @@
 
 .dropdown-menu {
   background-color: var(--header-bg) !important;
-  border: 1px solid var(--header-font) !important;
+  border: none !important;
   border-radius: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
+  min-width: 0 !important;
 }
 .dropdown-item {
   color: var(--header-font) !important;
   border-radius: 0 !important;
   padding: 0.5rem 1rem;
+  white-space: nowrap;
 }
 .dropdown-item:hover, .dropdown-item:focus {
   background-color: rgba(255, 255, 255, 0.1) !important;
@@ -305,9 +307,10 @@ pre code {
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
-  margin-top: -1px;
+  margin-top: 0;
   margin-left: 0;
   display: none;
+  border: none !important;
   border-radius: 0 !important;
 }
 .dropdown-submenu:hover > .dropdown-menu {
@@ -320,18 +323,14 @@ pre code {
   float: right;
   margin-top: 0.25rem;
 }
-.dropdown-menu .dropdown-item {
-  width: 100%;
-  white-space: nowrap;
-}
 @media (max-width: 767.98px) {
   .dropdown-submenu > .dropdown-menu {
     left: 0;
     top: 100%;
     margin-top: 0;
     margin-left: 1rem;
-    border: none;
-    border-left: 2px solid rgba(255, 255, 255, 0.2);
+    border: none !important;
+    border-radius: 0 !important;
     box-shadow: none;
   }
   .dropdown-submenu:hover > .dropdown-menu {
diff --git a/themes/default/assets/css_compiled/theme.css b/themes/default/assets/css_compiled/theme.css
index 10095d6..1aa63e4 100644
--- a/themes/default/assets/css_compiled/theme.css
+++ b/themes/default/assets/css_compiled/theme.css
@@ -70,15 +70,17 @@
 
 .dropdown-menu {
   background-color: var(--header-bg) !important;
-  border: 1px solid var(--header-font) !important;
+  border: none !important;
   border-radius: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
+  min-width: 0 !important;
 }
 .dropdown-item {
   color: var(--header-font) !important;
   border-radius: 0 !important;
   padding: 0.5rem 1rem;
+  white-space: nowrap;
 }
 .dropdown-item:hover, .dropdown-item:focus {
   background-color: rgba(255, 255, 255, 0.1) !important;
@@ -305,9 +307,10 @@ pre code {
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
-  margin-top: -1px;
+  margin-top: 0;
   margin-left: 0;
   display: none;
+  border: none !important;
   border-radius: 0 !important;
 }
 .dropdown-submenu:hover > .dropdown-menu {
@@ -320,18 +323,14 @@ pre code {
   float: right;
   margin-top: 0.25rem;
 }
-.dropdown-menu .dropdown-item {
-  width: 100%;
-  white-space: nowrap;
-}
 @media (max-width: 767.98px) {
   .dropdown-submenu > .dropdown-menu {
     left: 0;
     top: 100%;
     margin-top: 0;
     margin-left: 1rem;
-    border: none;
-    border-left: 2px solid rgba(255, 255, 255, 0.2);
+    border: none !important;
+    border-radius: 0 !important;
     box-shadow: none;
   }
   .dropdown-submenu:hover > .dropdown-menu {
diff --git a/themes/default/assets/scss/theme.scss b/themes/default/assets/scss/theme.scss
index 9f63306..6a7004c 100644
--- a/themes/default/assets/scss/theme.scss
+++ b/themes/default/assets/scss/theme.scss
@@ -109,16 +109,18 @@ $header-bg-opacity: 1;
 // Language dropdown styling
 .dropdown-menu {
     background-color: var(--header-bg) !important;
-    border: 1px solid var(--header-font) !important;
+    border: none !important;
     border-radius: 0 !important;
     padding: 0 !important;
     margin: 0 !important;
+    min-width: 0 !important;
 }
 
 .dropdown-item {
     color: var(--header-font) !important;
     border-radius: 0 !important;
     padding: 0.5rem 1rem;
+    white-space: nowrap;
 
     &:hover, &:focus {
         background-color: rgba(255, 255, 255, 0.1) !important;
@@ -308,9 +310,10 @@ $header-bg-opacity: 1;
     > .dropdown-menu {
         top: 0;
         left: 100%;
-        margin-top: -1px;
+        margin-top: 0;
         margin-left: 0;
         display: none;
+        border: none !important;
         border-radius: 0 !important;
     }
 
@@ -331,12 +334,6 @@ $header-bg-opacity: 1;
     }
 }
 
-// Ensure dropdown items fill width and no gaps
-.dropdown-menu .dropdown-item {
-    width: 100%;
-    white-space: nowrap;
-}
-
 // Mobile: submenu appears below instead of beside, open on tap
 @media (max-width: 767.98px) {
     .dropdown-submenu > .dropdown-menu {
@@ -344,8 +341,8 @@ $header-bg-opacity: 1;
         top: 100%;
         margin-top: 0;
         margin-left: 1rem;
-        border: none;
-        border-left: 2px solid rgba(255, 255, 255, 0.2);
+        border: none !important;
+        border-radius: 0 !important;
         box-shadow: none;
     }
     .dropdown-submenu:hover > .dropdown-menu {