From ca873a99f49ff9c2d64515a065bc5be898862806 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 3 Apr 2026 14:57:41 +0200
Subject: [PATCH] feat: improved button sizes in mobile view

---
 assets/styles/components/button.css             | 4 ++--
 templates/_partials/_cancel_button.html.twig    | 7 +++++++
 templates/booking/create/modal_cancel.html.twig | 8 ++++----
 templates/booking/create/step_1.html.twig       | 8 +-------
 templates/booking/create/step_2.html.twig       | 9 +--------
 templates/booking/create/step_3.html.twig       | 9 +--------
 templates/booking/create/step_4.html.twig       | 9 +--------
 templates/booking/edit/index.html.twig          | 4 ++--
 templates/booking/edit/participant.html.twig    | 4 ++--
 9 files changed, 21 insertions(+), 41 deletions(-)
 create mode 100644 templates/_partials/_cancel_button.html.twig

diff --git a/assets/styles/components/button.css b/assets/styles/components/button.css
index c1e366f..7ad73c5 100644
--- a/assets/styles/components/button.css
+++ b/assets/styles/components/button.css
@@ -1,6 +1,6 @@
 .button {
-    @apply inline-flex items-center justify-center space-x-2 h-10 leading-10 px-4 md:px-8 cursor-pointer;
-    @apply uppercase leading-none text-center;
+    @apply inline-flex items-center justify-center space-x-2 h-8 leading-8 md:h-10 md:leading-10 px-4 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center text-sm md:text-base;
     @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
     @apply rounded-md;
 }
diff --git a/templates/_partials/_cancel_button.html.twig b/templates/_partials/_cancel_button.html.twig
new file mode 100644
index 0000000..2dfbf50
--- /dev/null
+++ b/templates/_partials/_cancel_button.html.twig
@@ -0,0 +1,7 @@
+<button type="button"
+        hx-get="{{ path('app_booking_cancel') }}"
+        hx-target="body"
+        hx-swap="beforeend"
+        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md:h-10">
+    <svg class="w-6 h-6 md:w-8 md:h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+</button>
diff --git a/templates/booking/create/modal_cancel.html.twig b/templates/booking/create/modal_cancel.html.twig
index 7d4d4c9..222ba03 100644
--- a/templates/booking/create/modal_cancel.html.twig
+++ b/templates/booking/create/modal_cancel.html.twig
@@ -4,19 +4,19 @@
 
 {% block content %}
     <div class="pb-8">
-        Willst du den Buchungsvorgang wirklich abbrechen?
+        Möchtest du den Buchungsvorgang wirklich abbrechen?
     </div>
-    <div class="flex justify-between">
+    <div class="flex flex-col space-y-4 md:flex-row md:space-y-0 justify-between">
         <button type="button"
                 hx-post="{{ path('app_booking_cancel') }}"
                 hx-target="body"
                 class="button button--primary">
-            Abbrechen
+            Ja, Buchung abbrechen
         </button>
         <button type="button"
                 {{ stimulus_action('modal', 'close') }}
                 class="button button--secondary">
-            Weiter
+            Nein, Buchung abschließen
         </button>
     </div>
 {% endblock %}
diff --git a/templates/booking/create/step_1.html.twig b/templates/booking/create/step_1.html.twig
index 567b157..cb38ba2 100644
--- a/templates/booking/create/step_1.html.twig
+++ b/templates/booking/create/step_1.html.twig
@@ -87,13 +87,7 @@
         </div>
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
-                <button type="button"
-                        hx-get="{{ path('app_booking_cancel') }}"
-                        hx-target="body"
-                        hx-swap="beforeend"
-                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-                </button>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}}>
                     Weiter zu Schritt 2
                 </button>
diff --git a/templates/booking/create/step_2.html.twig b/templates/booking/create/step_2.html.twig
index a67310b..f993534 100644
--- a/templates/booking/create/step_2.html.twig
+++ b/templates/booking/create/step_2.html.twig
@@ -61,14 +61,7 @@
         </div>
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
-                <button type="button"
-                        title="Buchung abbrechen"
-                        hx-get="{{ path('app_booking_cancel') }}"
-                        hx-target="body"
-                        hx-swap="beforeend"
-                        class="button button--neutral w-10 h-10 px-0">
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-                </button>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <div class="flex items-center gap-2">
                     <a href="{{ path('app_booking_create_step_1') }}"
                        class="button button--secondary"
diff --git a/templates/booking/create/step_3.html.twig b/templates/booking/create/step_3.html.twig
index 177fe6b..8a5eb82 100644
--- a/templates/booking/create/step_3.html.twig
+++ b/templates/booking/create/step_3.html.twig
@@ -71,14 +71,7 @@
         </div>
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
-                <button type="button"
-                        title="Buchung abbrechen"
-                        hx-get="{{ path('app_booking_cancel') }}"
-                        hx-target="body"
-                        hx-swap="beforeend"
-                        class="button button--neutral w-10 h-10 px-0">
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-                </button>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <div class="flex items-center gap-2">
                     <a href="{{ path('app_booking_create_step_2') }}"
                        class="button button--secondary"
diff --git a/templates/booking/create/step_4.html.twig b/templates/booking/create/step_4.html.twig
index dea984b..ae1d928 100644
--- a/templates/booking/create/step_4.html.twig
+++ b/templates/booking/create/step_4.html.twig
@@ -564,14 +564,7 @@
         </div>
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
-                <button type="button"
-                        title="Buchung abbrechen"
-                        hx-get="{{ path('app_booking_cancel') }}"
-                        hx-target="body"
-                        hx-swap="beforeend"
-                        class="button button--neutral w-10 h-10 px-0">
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
-                </button>
+                {% include '_partials/_cancel_button.html.twig' %}
                 <div class="flex items-center gap-2">
                     <a href="{{ path('app_booking_create_step_3') }}"
                        class="button button--secondary"
diff --git a/templates/booking/edit/index.html.twig b/templates/booking/edit/index.html.twig
index 176609d..558fdfe 100644
--- a/templates/booking/edit/index.html.twig
+++ b/templates/booking/edit/index.html.twig
@@ -86,8 +86,8 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between" hx-disinherit="*">
                 <a href="{{ isDirty ? path('app_booking_edit_cancel', {id: bookingData.id}) : path('app_bookings') }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md:h-10">
+                    <svg class="w-6 h-6 md:w-8 md:h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </a>
                 {% if isDirty %}
                     <button type="submit"
diff --git a/templates/booking/edit/participant.html.twig b/templates/booking/edit/participant.html.twig
index 503e52c..217b305 100644
--- a/templates/booking/edit/participant.html.twig
+++ b/templates/booking/edit/participant.html.twig
@@ -34,9 +34,9 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between">
                 <a href="{{ path('app_booking_edit', {id: bookingDto.booking.id}) }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
+                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md:h-10"
                    {{ qa_attribute('btn-cancel') }}>
-                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                    <svg class="w-6 h-6 md:w-8 md:h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </a>
                 <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Speichern