Made dialog go full screen on mobile

This commit is contained in:
Alexis
2025-04-25 21:30:40 +02:00
parent b71e715cf5
commit a03b7890e6
3 changed files with 8 additions and 8 deletions

View File

@@ -41,12 +41,12 @@ const breakpoints = useBreakpoints(
<UiDialog v-model:open="isDialogOpen">
<UiDialogContent
class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
:trap-focus="true"
@escape-key-down.prevent="handleClosing"
@escape-key-down="handleClosing"
@pointer-down-outside.prevent="handleClosing"
>
<UiDialogTitle>
<UiDialogTitle class="max-md:mb-8">
{{ $t("entity.calendar.event.addSingle") }}
</UiDialogTitle>
<CalendarFormCreateEvent @event-created="toggleDialog" />

View File

@@ -25,13 +25,13 @@ function handleClosing() {
<UiDialogContent
:disable-outside-pointer-events="true"
:trap-focus="true"
class="pl-3 min-w-96 border-border"
class="pl-3 md:min-w-96 max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
@escape-key-down="handleClosing"
@focus-outside="handleClosing"
@interact-outside="handleClosing"
@pointer-down-outside="(e) => e.preventDefault()"
>
<header class="pl-8 grid gap-y-2">
<header class="pl-8 grid gap-y-2 max-md:mb-8">
<UiDialogTitle>
{{ $t('entity.calendar.event.editDialog.title') }}
</UiDialogTitle>

View File

@@ -76,12 +76,12 @@ function handleClosing() {
<UiDialog v-model:open="isDialogOpen">
<UiDialogContent
class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
:trap-focus="true"
@escape-key-down.prevent="handleClosing"
@escape-key-down="handleClosing"
@pointer-down-outside.prevent="null"
>
<UiDialogTitle>
<UiDialogTitle class="max-md:mb-8">
{{ $t("entity.calendar.event.addSingle") }}
</UiDialogTitle>
<CalendarFormCreateEvent @event-created="toggleDialog" />