fix: show scrollbars only when an inner area overflows

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;
+    }
+}

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 %}

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 %}

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 %}