fix: avoid content shift caused by scrollbar

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

assets/styles/app.css

@@ -5,3 +5,4 @@
 @import "_components.css";
 
 @import "tailwindcss/utilities";
+@import "_utilities.css";

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,

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>

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>

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 {

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>

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>

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>
 

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 {

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">

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

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

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>

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

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"

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>

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>