From 6d4a9f8c224d691bd0d4e9197ace40a87f621a96 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 10 Jun 2026 17:44:23 +0200
Subject: [PATCH] fix(activities): keep CreateEvent form actions inside narrow
 dialogs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two narrow-viewport overflow points:

- Pricing row was a hard grid-cols-3 even at 320–360px viewports, so
  the Currency select was getting pinched. Drop to grid-cols-2 with
  Currency spanning both cols on small screens, lift to grid-cols-3
  at sm+.

- Action row was justify-end with no wrap and no width fallback, so a
  wide localized "Submit Event" label could push Cancel out of the
  dialog. Stack full-width on mobile (flex-col-reverse so Submit is
  under the thumb), back to inline at sm+.

Also belt-and-suspenders: overflow-x-hidden on the dialog content so
any future runaway child can't induce a horizontal scroll inside the
dialog body.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../events/components/CreateEventDialog.vue   | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/modules/events/components/CreateEventDialog.vue b/src/modules/events/components/CreateEventDialog.vue
index 5c9d216..3f50231 100644
--- a/src/modules/events/components/CreateEventDialog.vue
+++ b/src/modules/events/components/CreateEventDialog.vue
@@ -432,7 +432,7 @@ const handleOpenChange = (open: boolean) => {
 
 <template>
   <Dialog :open="open" @update:open="handleOpenChange">
-    <DialogContent class="max-w-lg max-h-[90vh] p-0">
+    <DialogContent class="max-w-lg max-h-[90vh] p-0 overflow-x-hidden">
       <DialogHeader class="px-6 pt-6 pb-2">
         <DialogTitle class="flex items-center gap-2">
           <Calendar class="w-5 h-5" />
@@ -611,9 +611,13 @@ const handleOpenChange = (open: boolean) => {
                 fiat amounts convert at checkout using current rates.
               </p>
             </div>
-            <div class="grid grid-cols-3 gap-3">
+            <!-- Pricing grid: 2 cols on narrow phones (Tickets/Price share
+                 a row, Currency takes its own), 3 cols once we have the
+                 breathing room. Plain `grid-cols-3` was overflowing the
+                 dialog on 360px-class viewports. -->
+            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
               <FormField v-slot="{ componentField }" name="amount_tickets">
-                <FormItem>
+                <FormItem class="min-w-0">
                   <FormLabel>Tickets</FormLabel>
                   <FormControl>
                     <Input type="number" min="0" max="100000" placeholder="0" v-bind="componentField" />
@@ -624,7 +628,7 @@ const handleOpenChange = (open: boolean) => {
               </FormField>
 
               <FormField v-slot="{ componentField }" name="price_per_ticket">
-                <FormItem>
+                <FormItem class="min-w-0">
                   <FormLabel>Price</FormLabel>
                   <FormControl>
                     <Input type="number" min="0" step="1" placeholder="0" v-bind="componentField" />
@@ -635,11 +639,11 @@ const handleOpenChange = (open: boolean) => {
               </FormField>
 
               <FormField v-slot="{ componentField }" name="currency">
-                <FormItem>
+                <FormItem class="col-span-2 sm:col-span-1 min-w-0">
                   <FormLabel>Price currency</FormLabel>
                   <FormControl>
                     <Select v-bind="componentField">
-                      <SelectTrigger>
+                      <SelectTrigger class="w-full">
                         <SelectValue placeholder="sat" />
                       </SelectTrigger>
                       <SelectContent>
@@ -739,12 +743,26 @@ const handleOpenChange = (open: boolean) => {
             </CollapsibleContent>
           </Collapsible>
 
-          <!-- Actions -->
-          <div class="flex justify-end gap-3 pt-2">
-            <Button type="button" variant="outline" @click="handleOpenChange(false)" :disabled="isLoading">
+          <!-- Actions. Stack full-width on narrow viewports so a wide
+               localized "Submit Event" label can't push the Cancel
+               button out of the dialog. Submit reads top-down on
+               mobile (flex-col-reverse) to keep the primary action
+               under the thumb. -->
+          <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              class="w-full sm:w-auto"
+              @click="handleOpenChange(false)"
+              :disabled="isLoading"
+            >
               Cancel
             </Button>
-            <Button type="submit" :disabled="isLoading || !isFormValid">
+            <Button
+              type="submit"
+              class="w-full sm:w-auto"
+              :disabled="isLoading || !isFormValid"
+            >
               <Loader2 v-if="isLoading" class="w-4 h-4 mr-2 animate-spin" />
               {{
                 isLoading