aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

fix(activities): keep CreateEvent form actions inside narrow dialogs

Browse source 
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>
This commit is contained in:
Padreug 2026-06-10 17:44:23 +02:00
commit 6d4a9f8c22
1 changed files with 28 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/modules/events/components/CreateEventDialog.vue
View file

@ -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