From 8271a69f458213460c7449103ead1b230012eb3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Mon, 17 Aug 2026 16:14:25 +0200
Subject: [PATCH] fix: avoid content shift caused by scrollbar

---
 assets/styles/_utilities.css                          | 7 +++++++
 assets/styles/app.css                                 | 3 ++-
 templates/booking/_summary.html.twig                  | 2 +-
 templates/booking/create/step_1.html.twig             | 2 +-
 templates/booking/create/step_2.html.twig             | 2 +-
 templates/booking/create/step_2_participant.html.twig | 2 +-
 templates/booking/create/step_3.html.twig             | 2 +-
 templates/booking/create/step_4.html.twig             | 4 ++--
 templates/booking/edit/index.html.twig                | 2 +-
 templates/booking/edit/participant.html.twig          | 2 +-
 templates/booking/index.html.twig                     | 2 +-
 templates/groups/booking/_offer_summary.html.twig     | 2 +-
 templates/groups/booking/_summary.html.twig           | 2 +-
 templates/groups/booking/offer.html.twig              | 2 +-
 templates/groups/booking/step_1.html.twig             | 2 +-
 templates/groups/booking/step_2.html.twig             | 2 +-
 templates/groups/booking/step_3.html.twig             | 2 +-
 templates/groups/booking/step_4.html.twig             | 2 +-
 18 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 assets/styles/_utilities.css

diff --git a/assets/styles/_utilities.css b/assets/styles/_utilities.css
new file mode 100644
index 0000000..09aebd2
--- /dev/null
+++ b/assets/styles/_utilities.css
@@ -0,0 +1,7 @@
+@layer utilities {
+    /* Reserve the scrollbar gutter so content does not shift width when a
+       scrollbar appears (e.g. when a collapsible section is opened). */
+    .scroll-stable {
+        scrollbar-gutter: stable;
+    }
+}
diff --git a/assets/styles/app.css b/assets/styles/app.css
index aff375a..c4a5ab7 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -4,4 +4,5 @@
 @import "tailwindcss/components";
 @import "_components.css";
 
-@import "tailwindcss/utilities";
\ No newline at end of file
+@import "tailwindcss/utilities";
+@import "_utilities.css";
\ No newline at end of file
diff --git a/templates/booking/_summary.html.twig b/templates/booking/_summary.html.twig
index 5ba4e36..b638412 100644
--- a/templates/booking/_summary.html.twig
+++ b/templates/booking/_summary.html.twig
@@ -19,7 +19,7 @@
     </div>
 
     {# Content - toggleable on mobile, always visible on desktop #}
-    <div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto px-4 lg:px-8 py-8"
+    <div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto scroll-stable px-4 lg:px-8 py-8"
          data-toggle-target="content">
         {% include 'booking/_summary_travel_info.html.twig' with {
             'bookingDto': bookingDto,
diff --git a/templates/booking/create/step_1.html.twig b/templates/booking/create/step_1.html.twig
index 0bfbf6a..5a6be8a 100644
--- a/templates/booking/create/step_1.html.twig
+++ b/templates/booking/create/step_1.html.twig
@@ -57,7 +57,7 @@
                     <div class="hidden lg:block shrink-0">
                         {% include 'booking/_pagination.html.twig' with { 'current_step': 1 } %}
                     </div>
-                    <div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                    <div class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                         <h2 class="pb-4">
                             Unterkunft
                         </h2>
diff --git a/templates/booking/create/step_2.html.twig b/templates/booking/create/step_2.html.twig
index ecb2dca..d992020 100644
--- a/templates/booking/create/step_2.html.twig
+++ b/templates/booking/create/step_2.html.twig
@@ -30,7 +30,7 @@
                     <div class="hidden lg:block shrink-0">
                         {% include 'booking/_pagination.html.twig' with { 'current_step': 2 } %}
                     </div>
-                    <div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                    <div class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                         <h2 class="pb-4">
                             Teilnehmer:innen
                         </h2>
diff --git a/templates/booking/create/step_2_participant.html.twig b/templates/booking/create/step_2_participant.html.twig
index 0c24170..a99ac75 100644
--- a/templates/booking/create/step_2_participant.html.twig
+++ b/templates/booking/create/step_2_participant.html.twig
@@ -27,7 +27,7 @@
                 <div class="hidden lg:block shrink-0">
                     {% include 'booking/_pagination.html.twig' with { 'current_step': 2 } %}
                 </div>
-                <div id="main-content" class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                <div id="main-content" class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                     {# Flash messages - must be inside main-content for HTMX swap to display them #}
                     {% include '_partials/_flashes.html.twig' %}
                     {% include 'booking/_participant_form.html.twig' with {
diff --git a/templates/booking/create/step_3.html.twig b/templates/booking/create/step_3.html.twig
index 9cb4f0c..fd03acd 100644
--- a/templates/booking/create/step_3.html.twig
+++ b/templates/booking/create/step_3.html.twig
@@ -32,7 +32,7 @@
                     <div class="hidden lg:block shrink-0">
                         {% include 'booking/_pagination.html.twig' with { 'current_step': 3 } %}
                     </div>
-                    <div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                    <div class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                         <h2 class="pb-4">
                             Zahlungsart
                         </h2>
diff --git a/templates/booking/create/step_4.html.twig b/templates/booking/create/step_4.html.twig
index 594b642..4598a1f 100644
--- a/templates/booking/create/step_4.html.twig
+++ b/templates/booking/create/step_4.html.twig
@@ -26,7 +26,7 @@
                         <span class="block uppercase font-semibold">Buchungsübersicht</span>
                     </div>
                 </div>
-                <div class="overflow-y-auto px-4 lg:px-8 py-8">
+                <div class="overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                     {% include 'booking/_summary_travel_info.html.twig' with {
                         'bookingDto': bookingCreateContext.bookingDto,
                         'summaryData': bookingCreateContext.summaryData,
@@ -42,7 +42,7 @@
                 <div class="hidden lg:block shrink-0">
                     {% include 'booking/_pagination.html.twig' with { 'current_step': 4 } %}
                 </div>
-                <div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                <div class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                     <h2 class="pb-4">
                         Bitte bestätige deine Buchung
                     </h2>
diff --git a/templates/booking/edit/index.html.twig b/templates/booking/edit/index.html.twig
index 016e006..eb6d66e 100644
--- a/templates/booking/edit/index.html.twig
+++ b/templates/booking/edit/index.html.twig
@@ -42,7 +42,7 @@
                 </div>
 
                 {# Scrollable content #}
-                <div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                <div class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                     {% block participant_cards %}
                         <h2 class="pb-4">Teilnehmer:innen</h2>
 
diff --git a/templates/booking/edit/participant.html.twig b/templates/booking/edit/participant.html.twig
index 80777ec..a83798d 100644
--- a/templates/booking/edit/participant.html.twig
+++ b/templates/booking/edit/participant.html.twig
@@ -24,7 +24,7 @@
                 <div class="hidden lg:flex shrink-0 px-4 lg:px-8 h-16 items-center shadow-md relative z-10 bg-white">
                     <h1 class="text-xl font-semibold uppercase">Buchung bearbeiten</h1>
                 </div>
-                <div id="main-content" class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                <div id="main-content" class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                     {# Flash messages - must be inside main-content for HTMX swap to display them #}
                     {% include '_partials/_flashes.html.twig' %}
                     {% include 'booking/_participant_form.html.twig' with {
diff --git a/templates/booking/index.html.twig b/templates/booking/index.html.twig
index a1e25f3..e83fcc1 100644
--- a/templates/booking/index.html.twig
+++ b/templates/booking/index.html.twig
@@ -10,7 +10,7 @@
         </div>
 
         {# Scrollable content area #}
-        <div class="flex-1 overflow-y-auto p-4 lg:p-8 bg-primary-bg">
+        <div class="flex-1 overflow-y-auto scroll-stable p-4 lg:p-8 bg-primary-bg">
             {% include '_partials/_flashes.html.twig' %}
 
             <div class="space-y-8 pb-8">
diff --git a/templates/groups/booking/_offer_summary.html.twig b/templates/groups/booking/_offer_summary.html.twig
index aa9bdaf..9970256 100644
--- a/templates/groups/booking/_offer_summary.html.twig
+++ b/templates/groups/booking/_offer_summary.html.twig
@@ -26,7 +26,7 @@
     </div>
 
     {# Content #}
-    <div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto px-4 lg:px-8 py-8"
+    <div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto scroll-stable px-4 lg:px-8 py-8"
          data-toggle-target="content">
 
         {# Accommodation info #}
diff --git a/templates/groups/booking/_summary.html.twig b/templates/groups/booking/_summary.html.twig
index 7a34158..6b2ca8e 100644
--- a/templates/groups/booking/_summary.html.twig
+++ b/templates/groups/booking/_summary.html.twig
@@ -27,7 +27,7 @@
     </div>
 
     {# Content #}
-    <div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto px-4 lg:px-8 py-8"
+    <div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto scroll-stable px-4 lg:px-8 py-8"
          data-toggle-target="content">
 
         {# Accommodation info #}
diff --git a/templates/groups/booking/offer.html.twig b/templates/groups/booking/offer.html.twig
index 62ae2ca..a27043c 100644
--- a/templates/groups/booking/offer.html.twig
+++ b/templates/groups/booking/offer.html.twig
@@ -47,7 +47,7 @@
         </div>
 
         {# Main area #}
-        <div class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col gap-y-8 min-h-0 overflow-y-auto px-4 lg:px-8 py-8">
+        <div class="flex-1 order-2 lg:order-1 lg:col-span-3 bg-white flex flex-col gap-y-8 min-h-0 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
             {% include '_partials/_flashes.html.twig' %}
 
             <hgroup>
diff --git a/templates/groups/booking/step_1.html.twig b/templates/groups/booking/step_1.html.twig
index ee7c65a..df1d69b 100644
--- a/templates/groups/booking/step_1.html.twig
+++ b/templates/groups/booking/step_1.html.twig
@@ -37,7 +37,7 @@
                     {% include 'groups/booking/_pagination.html.twig' with { 'current_step': 1 } %}
                 </div>
 
-                <div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                <div class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
 
                     <h2 class="pb-2">
                         Gewünschter Zeitraum
diff --git a/templates/groups/booking/step_2.html.twig b/templates/groups/booking/step_2.html.twig
index 9c3c457..4f28cd9 100644
--- a/templates/groups/booking/step_2.html.twig
+++ b/templates/groups/booking/step_2.html.twig
@@ -43,7 +43,7 @@
                     {# The scroll container itself must survive the htmx refresh — only its contents
                        are swapped, so assets/loading.js can restore the scroll position. #}
                     <div id="booking-form"
-                         class="flex-1 overflow-y-auto px-4 lg:px-8 py-8"
+                         class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8"
                          hx-post="{{ path('app_groups_booking_step_2_refresh') }}"
                          hx-trigger="change delay:300ms"
                          hx-target="#booking-form"
diff --git a/templates/groups/booking/step_3.html.twig b/templates/groups/booking/step_3.html.twig
index 26aa063..d1f3e76 100644
--- a/templates/groups/booking/step_3.html.twig
+++ b/templates/groups/booking/step_3.html.twig
@@ -36,7 +36,7 @@
                     {% include 'groups/booking/_pagination.html.twig' with { 'current_step': 3 } %}
                 </div>
 
-                <div id="booking-form" class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                <div id="booking-form" class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                     <h2 class="pb-4">
                         Persönliche Daten
                     </h2>
diff --git a/templates/groups/booking/step_4.html.twig b/templates/groups/booking/step_4.html.twig
index 72ff1a5..fbf508d 100644
--- a/templates/groups/booking/step_4.html.twig
+++ b/templates/groups/booking/step_4.html.twig
@@ -27,7 +27,7 @@
                 {% include 'groups/booking/_pagination.html.twig' with { 'current_step': 4 } %}
             </div>
 
-            <div class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+            <div class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                 <h2 class="pb-4">
                     Bitte bestätige deine Angaben
                 </h2>