feat(ui): improve mobile responsiveness and touch targets

Add mobile-optimized card view for seat lists on smaller screens
Increase minimum height for buttons and form items for better touch interaction
Adjust grid layouts, padding, and spacing across pages for mobile devices

app/components/QrCodeSvg.vue

@@ -42,13 +42,13 @@ watch(
 </script>
 
 <template>
-  <div class="inline-flex flex-col items-center gap-2">
+  <div class="inline-flex max-w-full flex-col items-center gap-2">
     <div
       v-if="markup"
-      class="overflow-hidden rounded-2xl border border-default bg-default p-4 shadow-sm"
+      class="max-w-full overflow-hidden rounded-lg border border-default bg-default p-3 shadow-sm sm:p-4"
     >
       <div
-        class="[&>svg]:block [&>svg]:h-auto [&>svg]:w-full"
+        class="max-w-full [&>svg]:block [&>svg]:h-auto [&>svg]:w-full"
         :style="{ width: `${size}px` }"
         v-html="markup"
       />
@@ -56,8 +56,8 @@ watch(
 
     <div
       v-else
-      class="flex items-center justify-center rounded-2xl border border-dashed border-muted bg-elevated p-4 text-center text-sm text-muted"
-      :style="{ width: `${size}px`, minHeight: `${size}px` }"
+      class="flex max-w-full items-center justify-center rounded-lg border border-dashed border-muted bg-elevated p-4 text-center text-sm text-muted"
+      :style="{ width: `${size}px`, maxWidth: '100%', minHeight: `${size}px` }"
     >
       QR code unavailable
     </div>