fix: avoid content shift caused by scrollbar

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
@@ -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 #}
+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 #}
+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>
+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
+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"
+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>
+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>