feat(activities): UI tweaks across feed, detail, hosting, calendar, scan, shell #91
1 changed files with 28 additions and 10 deletions
fix(activities): keep CreateEvent form actions inside narrow dialogs
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>
commit
6d4a9f8c22
|
|
@ -432,7 +432,7 @@ const handleOpenChange = (open: boolean) => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Dialog :open="open" @update:open="handleOpenChange">
|
<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">
|
<DialogHeader class="px-6 pt-6 pb-2">
|
||||||
<DialogTitle class="flex items-center gap-2">
|
<DialogTitle class="flex items-center gap-2">
|
||||||
<Calendar class="w-5 h-5" />
|
<Calendar class="w-5 h-5" />
|
||||||
|
|
@ -611,9 +611,13 @@ const handleOpenChange = (open: boolean) => {
|
||||||
fiat amounts convert at checkout using current rates.
|
fiat amounts convert at checkout using current rates.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<FormField v-slot="{ componentField }" name="amount_tickets">
|
||||||
<FormItem>
|
<FormItem class="min-w-0">
|
||||||
<FormLabel>Tickets</FormLabel>
|
<FormLabel>Tickets</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input type="number" min="0" max="100000" placeholder="0" v-bind="componentField" />
|
<Input type="number" min="0" max="100000" placeholder="0" v-bind="componentField" />
|
||||||
|
|
@ -624,7 +628,7 @@ const handleOpenChange = (open: boolean) => {
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
<FormField v-slot="{ componentField }" name="price_per_ticket">
|
<FormField v-slot="{ componentField }" name="price_per_ticket">
|
||||||
<FormItem>
|
<FormItem class="min-w-0">
|
||||||
<FormLabel>Price</FormLabel>
|
<FormLabel>Price</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Input type="number" min="0" step="1" placeholder="0" v-bind="componentField" />
|
<Input type="number" min="0" step="1" placeholder="0" v-bind="componentField" />
|
||||||
|
|
@ -635,11 +639,11 @@ const handleOpenChange = (open: boolean) => {
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
<FormField v-slot="{ componentField }" name="currency">
|
<FormField v-slot="{ componentField }" name="currency">
|
||||||
<FormItem>
|
<FormItem class="col-span-2 sm:col-span-1 min-w-0">
|
||||||
<FormLabel>Price currency</FormLabel>
|
<FormLabel>Price currency</FormLabel>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Select v-bind="componentField">
|
<Select v-bind="componentField">
|
||||||
<SelectTrigger>
|
<SelectTrigger class="w-full">
|
||||||
<SelectValue placeholder="sat" />
|
<SelectValue placeholder="sat" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
|
|
@ -739,12 +743,26 @@ const handleOpenChange = (open: boolean) => {
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
|
|
||||||
<!-- Actions -->
|
<!-- Actions. Stack full-width on narrow viewports so a wide
|
||||||
<div class="flex justify-end gap-3 pt-2">
|
localized "Submit Event" label can't push the Cancel
|
||||||
<Button type="button" variant="outline" @click="handleOpenChange(false)" :disabled="isLoading">
|
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
|
Cancel
|
||||||
</Button>
|
</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" />
|
<Loader2 v-if="isLoading" class="w-4 h-4 mr-2 animate-spin" />
|
||||||
{{
|
{{
|
||||||
isLoading
|
isLoading
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue