From 9a8879dfbe165e9f421ff3f72a1ecc48d643bdab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <bjoern.fromme@ep-reisen.de>
Date: Tue, 6 Oct 2026 10:50:30 +0200
Subject: [PATCH] fix: give buttons the input box model so they align with
 fields

---
 assets/styles/components/button.css           | 11 +++++++----
 templates/booking/_participant_form.html.twig |  6 +++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/assets/styles/components/button.css b/assets/styles/components/button.css
index 2b31cb65..4a84c4a8 100644
--- a/assets/styles/components/button.css
+++ b/assets/styles/components/button.css
@@ -1,16 +1,19 @@
 .button {
-    @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;
+    /* Same box as the @tailwindcss/forms inputs (1px border, py-2, 24px line), so a button lines up with a field beside it.
+       The line height is set with each font size (text-sm/6), because text-sm's own line height would override a plain leading-6. */
+    @apply inline-flex items-center justify-center space-x-2 px-4 md:px-8 py-2 border border-transparent bg-origin-border cursor-pointer;
+    @apply uppercase text-center text-sm/6 md:text-base/6;
     @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
     @apply rounded-md;
 }
 
 .button--small {
-    @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
+    @apply px-2 py-1 md:px-4 text-xs/6 sm:text-sm/6;
 }
 
 .button--primary {
-    background: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
+    /* Only the image: the background shorthand would reset .button's background-origin */
+    background-image: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
     @apply text-white;
     @apply hover:bg-none hover:bg-pink/80;
 }
diff --git a/templates/booking/_participant_form.html.twig b/templates/booking/_participant_form.html.twig
index 111bd7f2..3f8f989f 100644
--- a/templates/booking/_participant_form.html.twig
+++ b/templates/booking/_participant_form.html.twig
@@ -697,11 +697,11 @@
             </h3>
             <div class="mb-4">
                 {{ form_label(form.voucherCode) }}
-                <div class="flex items-center gap-2">
-                    <div class="grow">
+                <div class="flex items-end gap-2">
+                    <div class="grow min-w-0">
                         {{ form_widget(form.voucherCode) }}
                     </div>
-                    <button type="button" class="button button--secondary"
+                    <button type="button" class="button button--secondary shrink-0 whitespace-nowrap"
                         {% for name, value in voucherHx %} {{ name }}="{{ value }}"{% endfor %}>
                         Code einlösen
                     </button>