From a6a8783319221d3b1ff717cb491d605f9b67f244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <bjoern.fromme@ep-reisen.de>
Date: Tue, 20 Oct 2026 14:43:10 +0200
Subject: [PATCH] fix: show scrollbars only when an inner area overflows

---
 assets/styles/_theme.css         | 12 ++++++++++++
 templates/forms.html.twig        |  2 +-
 templates/forms_admin.html.twig  |  2 +-
 templates/layout_admin.html.twig |  2 +-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/styles/_theme.css b/assets/styles/_theme.css
index 035907cb..97e9fb29 100644
--- a/assets/styles/_theme.css
+++ b/assets/styles/_theme.css
@@ -52,3 +52,15 @@
         cursor: pointer;
     }
 }
+
+/*
+ * Thin scrollbars without a track for inner scrolling areas. The page scrollbar takes its
+ * style from <html>, which body * leaves out. Firefox and Chrome/Edge 121+ honour these;
+ * Safari keeps its own overlay scrollbars.
+ */
+@layer base {
+    body * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--color-gray-300) transparent;
+    }
+}
diff --git a/templates/forms.html.twig b/templates/forms.html.twig
index ace8b4af..be036ee1 100644
--- a/templates/forms.html.twig
+++ b/templates/forms.html.twig
@@ -237,7 +237,7 @@
             <div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
             <svg class="w-4 h-4 mt-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="12"/><circle cx="128" cy="60" r="12"/><circle cx="128" cy="196" r="12"/></svg>
         </div>
-        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
+        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-auto px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
             {% for item in form.children %}
                 {{ form_row(item, { 'attr': { 'data-action': 'multiselect#update', 'data-multiselect-target': 'choice', 'data-label': item.vars.label } }) }}
             {% endfor %}
diff --git a/templates/forms_admin.html.twig b/templates/forms_admin.html.twig
index 01a10266..866effe9 100644
--- a/templates/forms_admin.html.twig
+++ b/templates/forms_admin.html.twig
@@ -227,7 +227,7 @@
             <div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
             {{ icon('dots', 'w-4 h-4 mt-2') }}
         </div>
-        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
+        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-auto px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
             {% for item in form.children %}
                 {{ form_row(item, { 'attr': { 'data-action': 'multiselect#update', 'data-multiselect-target': 'choice', 'data-label': item.vars.label } }) }}
             {% endfor %}
diff --git a/templates/layout_admin.html.twig b/templates/layout_admin.html.twig
index d87cec33..b2b82879 100644
--- a/templates/layout_admin.html.twig
+++ b/templates/layout_admin.html.twig
@@ -38,7 +38,7 @@
                     {{ icon('close', 'w-8 h-8') }}
                 </button>
             </div>
-            <div class="w-full h-full p-8 pt-0 overflow-y-scroll">
+            <div class="w-full h-full p-8 pt-0 overflow-y-auto">
                 {% if app.user %}
                     {{ knp_menu_render(knp_menu_get('admin_main')) }}
                 {% endif %}