EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: avoid content shift caused by scrollbar

Browse Source
This commit is contained in:
Björn Fromme
2026-08-17 16:14:25 +02:00
parent f00351706e
commit 8271a69f45
18 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/_utilities.css
+7
View File
@@ -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
+2 -1
View File
@@ -4,4 +4,5 @@
@import "tailwindcss/components";
@import "_components.css";
@import "tailwindcss/utilities";
@import "tailwindcss/utilities";
@import "_utilities.css";
templates/booking/_summary.html.twig
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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>