From 265ba6a8f5b44877de11a751fbcfa4782701161d Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Thu, 13 Feb 2025 19:57:04 +0000
Subject: [PATCH] style: update grid layout and improve form structure (#22)

Reviewed-on: https://git.simonis.lol/projects/abiball/pulls/22
Reviewed-by: Constantin Simonis <constantin@simonis.lol>
Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me>
Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>
---
 templates/ticket/_partials/_form.html.twig | 13 ++++++++-----
 templates/ticket/index.html.twig           |  6 ------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/templates/ticket/_partials/_form.html.twig b/templates/ticket/_partials/_form.html.twig
index 93e020e..199089f 100644
--- a/templates/ticket/_partials/_form.html.twig
+++ b/templates/ticket/_partials/_form.html.twig
@@ -1,6 +1,7 @@
 <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 p-5 hover:shadow-lg transition-all duration-300 group">
-    <div class="grid grid-cols-12 gap-5">
-        <div class="relative col-span-3">
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-3 md:gap-5">
+        <div class="md:col-span-3">
+            <div class="mb-1.5 text-gray-600 font-medium text-sm">Ticket-Typ</div>
             <div class="relative group">
                 <twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
                 <select name="ticket" 
@@ -19,7 +20,8 @@
             </div>
         </div>
 
-        <div class="relative col-span-3">
+        <div class="md:col-span-3">
+            <div class="mb-1.5 text-gray-600 font-medium text-sm">Ernährung</div>
             <div class="relative group">
                 <twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
                 <select name="food" 
@@ -37,7 +39,8 @@
             </div>
         </div>
 
-        <div class="relative col-span-5">
+        <div class="md:col-span-5">
+            <div class="mb-1.5 text-gray-600 font-medium text-sm">Anmerkungen</div>
             <div class="relative group">
                 <twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
                 <input type="text" 
@@ -48,7 +51,7 @@
             </div>
         </div>
 
-        <div class="flex justify-center items-end col-span-1 pb-1">
+        <div class="flex justify-end md:justify-center items-end md:col-span-1">
             <button data-action="form#removeEntry"
                     type="button"
                     class="group/btn p-3 hover:bg-red-50 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-200" 
diff --git a/templates/ticket/index.html.twig b/templates/ticket/index.html.twig
index a11fa35..2234232 100644
--- a/templates/ticket/index.html.twig
+++ b/templates/ticket/index.html.twig
@@ -60,12 +60,6 @@
                                 <span>Tickets</span>
                             </h2>
 
-                            <div class="ml-5 grid grid-cols-4 gap-4 mb-4 px-4 text-sm font-medium text-gray-600">
-                                <div>Ticket</div>
-                                <div>Ernährung</div>
-                                <div>Anmerkungen</div>
-                            </div>
-
                             <div class="forms space-y-4">
                                 {% include 'ticket/_partials/_form.html.twig' %}
                             </div>