From 3f806669c6a1af890a6c51212de96a4efddd71e1 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:16:01 +0200
Subject: [PATCH] fix: show scrollbars only when an inner area overflows

---
 assets/styles/app.css                                | 12 ++++++++++++
 assets/styles/components/timeline.css                |  2 +-
 .../_partials/_assignment_info_compact.html.twig     |  2 +-
 templates/admin/index.html.twig                      | 10 +++++-----
 templates/forms.html.twig                            |  2 +-
 templates/htmx_modal.html.twig                       |  2 +-
 templates/layout.html.twig                           |  2 +-
 templates/manager/index.html.twig                    |  6 +++---
 8 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/assets/styles/app.css b/assets/styles/app.css
index a69df1e..e236087 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -32,3 +32,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/assets/styles/components/timeline.css b/assets/styles/components/timeline.css
index 5713880..02b0255 100644
--- a/assets/styles/components/timeline.css
+++ b/assets/styles/components/timeline.css
@@ -1,4 +1,4 @@
 .scroll-container {
-    @apply overflow-scroll;
+    @apply overflow-auto;
     max-height: calc(100vh - 320px);
 }
diff --git a/templates/_partials/_assignment_info_compact.html.twig b/templates/_partials/_assignment_info_compact.html.twig
index df68eca..b9d988b 100644
--- a/templates/_partials/_assignment_info_compact.html.twig
+++ b/templates/_partials/_assignment_info_compact.html.twig
@@ -4,7 +4,7 @@
             <dt class="text-sm font-bold leading-6 text-gray-900">
                 Jobprofil
             </dt>
-            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0 max-h-96 overflow-y-scroll">
+            <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-3 sm:mt-0 max-h-96 overflow-y-auto pr-3">
                 <strong>{{ assignment.jobProfile.name }}</strong>
                 {% if assignment.jobProfileInfo %}
                     <div class="pt-2">
diff --git a/templates/admin/index.html.twig b/templates/admin/index.html.twig
index 9c62b3f..801a635 100644
--- a/templates/admin/index.html.twig
+++ b/templates/admin/index.html.twig
@@ -61,7 +61,7 @@
                     <span>{{ newContractsCount }} neu, {{ pendingContractsCount }} in Bearbeitung</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for document in newContracts %}
                         {% set assignment = document.disposition.assignment %}
@@ -95,7 +95,7 @@
                     <span>{{ newInvoicesCount }} neu, {{ pendingInvoicesCount }} in Bearbeitung</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for document in newInvoices %}
                         {% set assignment = document.disposition.assignment %}
@@ -128,7 +128,7 @@
                     <span>{{ newDriverLicensesCount }} neu</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for document in newDriverLicenses %}
                         <li class="py-2 first:pt-0 last:pb-0">
@@ -242,7 +242,7 @@
                     <span>{{ overdueFeedbacksCount }} überfällig</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for disposition in overdueFeedbacks %}
                         {% set assignment = disposition.assignment %}
@@ -278,7 +278,7 @@
                     <span>{{ overdueContractsCount }} überfällig</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for disposition in overdueContracts %}
                         {% set assignment = disposition.assignment %}
diff --git a/templates/forms.html.twig b/templates/forms.html.twig
index cc718d5..3c54232 100644
--- a/templates/forms.html.twig
+++ b/templates/forms.html.twig
@@ -269,7 +269,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/htmx_modal.html.twig b/templates/htmx_modal.html.twig
index 53e146f..a360536 100644
--- a/templates/htmx_modal.html.twig
+++ b/templates/htmx_modal.html.twig
@@ -12,7 +12,7 @@
                     {{ icon('close', 'w-6 h-6')}}
                 </button>
             </div>
-            <div class="h-96 overflow-y-scroll">
+            <div class="h-96 overflow-y-auto">
                 <div class="px-8">
                     {% block content %}{% endblock %}
                 </div>
diff --git a/templates/layout.html.twig b/templates/layout.html.twig
index b83c26e..b3874fe 100644
--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -47,7 +47,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">
                 {% block mobile_menu %}{% endblock %}
             </div>
         </div>
diff --git a/templates/manager/index.html.twig b/templates/manager/index.html.twig
index 422e78b..739f0df 100644
--- a/templates/manager/index.html.twig
+++ b/templates/manager/index.html.twig
@@ -9,7 +9,7 @@
                     <span>{{ newContractsCount }} neu, {{ pendingContractsCount }} in Bearbeitung</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for document in newContracts %}
                         {% set assignment = document.disposition.assignment %}
@@ -42,7 +42,7 @@
                     <span>{{ newInvoicesCount }} neu, {{ pendingInvoicesCount }} in Bearbeitung</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for document in newInvoices %}
                         {% set assignment = document.disposition.assignment %}
@@ -96,7 +96,7 @@
                     <span>{{ overdueFeedbacksCount }} überfällig</span>
                 {% endif %}
             </h2>
-            <div class="max-h-64 overflow-y-scroll overflow-x-hidden">
+            <div class="max-h-64 overflow-y-auto overflow-x-hidden pr-3">
                 <ul class="divide-y divide-gray-200">
                     {% for disposition in overdueFeedbacks %}
                         {% set assignment = disposition.assignment %}