From 0137877439fc9e69a6108642956e0af6edb662b1 Mon Sep 17 00:00:00 2001
From: Edwin Noorlander <edwin@noorlander.info>
Date: Tue, 11 Aug 2026 16:43:13 +0200
Subject: [PATCH] Fix dropdown width: width: max-content on menu, width: 100%
 on items

- dropdown-menu: width: max-content (menu adapts to longest item)
- dropdown-item: width: 100% (items fill menu width)
- Same for submenu dropdown-menu
---
 themes/default/assets/css/theme.css          | 5 ++++-
 themes/default/assets/css_compiled/theme.css | 5 ++++-
 themes/default/assets/scss/theme.scss        | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/themes/default/assets/css/theme.css b/themes/default/assets/css/theme.css
index 89471bc..3d1a23c 100644
--- a/themes/default/assets/css/theme.css
+++ b/themes/default/assets/css/theme.css
@@ -82,13 +82,15 @@
   margin: 0 !important;
   min-width: 0 !important;
   box-shadow: none !important;
+  width: max-content;
 }
 .dropdown-item {
   color: var(--header-font) !important;
   border-radius: 0 !important;
   padding: 0.4rem 1rem;
   white-space: nowrap;
-  width: auto;
+  display: block;
+  width: 100%;
 }
 .dropdown-item:hover, .dropdown-item:focus {
   background-color: rgba(255, 255, 255, 0.1) !important;
@@ -322,6 +324,7 @@ pre code {
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;
+  width: max-content;
 }
 .dropdown-submenu:hover > .dropdown-menu {
   display: block;
diff --git a/themes/default/assets/css_compiled/theme.css b/themes/default/assets/css_compiled/theme.css
index 89471bc..3d1a23c 100644
--- a/themes/default/assets/css_compiled/theme.css
+++ b/themes/default/assets/css_compiled/theme.css
@@ -82,13 +82,15 @@
   margin: 0 !important;
   min-width: 0 !important;
   box-shadow: none !important;
+  width: max-content;
 }
 .dropdown-item {
   color: var(--header-font) !important;
   border-radius: 0 !important;
   padding: 0.4rem 1rem;
   white-space: nowrap;
-  width: auto;
+  display: block;
+  width: 100%;
 }
 .dropdown-item:hover, .dropdown-item:focus {
   background-color: rgba(255, 255, 255, 0.1) !important;
@@ -322,6 +324,7 @@ pre code {
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;
+  width: max-content;
 }
 .dropdown-submenu:hover > .dropdown-menu {
   display: block;
diff --git a/themes/default/assets/scss/theme.scss b/themes/default/assets/scss/theme.scss
index 2c1d305..2f0d244 100644
--- a/themes/default/assets/scss/theme.scss
+++ b/themes/default/assets/scss/theme.scss
@@ -121,6 +121,7 @@ $header-bg-opacity: 1;
     margin: 0 !important;
     min-width: 0 !important;
     box-shadow: none !important;
+    width: max-content;
 }
 
 .dropdown-item {
@@ -128,7 +129,8 @@ $header-bg-opacity: 1;
     border-radius: 0 !important;
     padding: 0.4rem 1rem;
     white-space: nowrap;
-    width: auto;
+    display: block;
+    width: 100%;
 
     &:hover, &:focus {
         background-color: rgba(255, 255, 255, 0.1) !important;
@@ -325,6 +327,7 @@ $header-bg-opacity: 1;
         border: none !important;
         border-radius: 0 !important;
         box-shadow: none !important;
+        width: max-content;
     }
 
     // Open submenu on hover (desktop)