From 20138083125a145f796652b5a95c9fc89f4e0ed2 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 19:41:52 -0300
Subject: [PATCH] fix(ui): third-pass mobile fixes

- AutomationHeader reserves space for the floating hamburger on mobile (its full-width pages had the back button under the trigger)
- AlertDialogContent caps height + scrolls like DialogContent
- AiGenerateDialog preview wraps long tokens (break-words)
- Enlarge notification panel action buttons on the full-width mobile panel (max-sm:size-9)
- min-w-0 so the billing processing title-bar label can truncate
---
 resources/js/components/NotificationBell.vue              | 8 ++++----
 resources/js/components/automations/AutomationHeader.vue  | 2 +-
 resources/js/components/posts/ai/AiGenerateDialog.vue     | 2 +-
 .../js/components/ui/alert-dialog/AlertDialogContent.vue  | 2 +-
 resources/js/pages/billing/Processing.vue                 | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/NotificationBell.vue b/resources/js/components/NotificationBell.vue
index f0dbe296..7fcd5aab 100644
--- a/resources/js/components/NotificationBell.vue
+++ b/resources/js/components/NotificationBell.vue
@@ -226,7 +226,7 @@ onBeforeUnmount(() => {
                             <TooltipTrigger as-child>
                                 <button
                                     type="button"
-                                    class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
+                                    class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
                                     @click="handleMarkAllAsRead"
                                 >
                                     <IconChecks class="size-3.5" stroke-width="2.5" />
@@ -238,7 +238,7 @@ onBeforeUnmount(() => {
                             <TooltipTrigger as-child>
                                 <button
                                     type="button"
-                                    class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
+                                    class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:bg-violet-100"
                                     @click="handleArchiveAll"
                                 >
                                     <IconArchive class="size-3.5" stroke-width="2.5" />
@@ -248,7 +248,7 @@ onBeforeUnmount(() => {
                         </Tooltip>
                         <button
                             type="button"
-                            class="inline-flex size-7 cursor-pointer items-center justify-center rounded-full border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:-rotate-90 hover:bg-rose-100"
+                            class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-full border-2 border-foreground bg-card text-foreground shadow-2xs transition-all hover:-rotate-90 hover:bg-rose-100"
                             @click="close"
                         >
                             <IconX class="size-3.5" stroke-width="2.5" />
@@ -281,7 +281,7 @@ onBeforeUnmount(() => {
                                     <TooltipTrigger as-child>
                                         <button
                                             type="button"
-                                            class="inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-foreground/60 transition-colors hover:bg-foreground/10 hover:text-foreground"
+                                            class="inline-flex size-7 max-sm:size-9 cursor-pointer items-center justify-center rounded-md text-foreground/60 transition-colors hover:bg-foreground/10 hover:text-foreground"
                                             @click="handleMarkAsRead(notification)"
                                         >
                                             <IconCheck class="size-3.5" stroke-width="2.5" />
diff --git a/resources/js/components/automations/AutomationHeader.vue b/resources/js/components/automations/AutomationHeader.vue
index 51b2cd29..4b287a8c 100644
--- a/resources/js/components/automations/AutomationHeader.vue
+++ b/resources/js/components/automations/AutomationHeader.vue
@@ -26,7 +26,7 @@ const statusConfig = (status: string) => {
 
 <template>
     <div class="flex-shrink-0">
-        <header class="flex items-center justify-between gap-4 border-b-2 border-foreground/10 bg-card px-4 py-2">
+        <header class="flex items-center justify-between gap-4 border-b-2 border-foreground/10 bg-card py-2 pl-12 pr-4 md:pl-4">
             <div class="flex min-w-0 items-center gap-3">
                 <Link :href="automationsIndex.url()">
                     <Button variant="outline" size="icon-sm">
diff --git a/resources/js/components/posts/ai/AiGenerateDialog.vue b/resources/js/components/posts/ai/AiGenerateDialog.vue
index bd3a1f6a..941fb7f8 100644
--- a/resources/js/components/posts/ai/AiGenerateDialog.vue
+++ b/resources/js/components/posts/ai/AiGenerateDialog.vue
@@ -104,7 +104,7 @@ watch(open, () => {
 
                 <div v-if="status !== 'idle'" class="grid gap-2">
                     <Label class="text-[11px] font-black uppercase tracking-widest text-foreground/60">{{ $t('posts.ai.generate.preview_label') }}</Label>
-                    <div class="min-h-[120px] whitespace-pre-wrap rounded-lg border-2 border-foreground bg-card px-3 py-2 text-sm font-medium text-foreground shadow-2xs">{{ previewText || '...' }}</div>
+                    <div class="min-h-[120px] whitespace-pre-wrap break-words rounded-lg border-2 border-foreground bg-card px-3 py-2 text-sm font-medium text-foreground shadow-2xs">{{ previewText || '...' }}</div>
                     <p v-if="status === 'failed'" class="text-xs font-semibold text-rose-700">{{ errorMessage }}</p>
                 </div>
             </div>
diff --git a/resources/js/components/ui/alert-dialog/AlertDialogContent.vue b/resources/js/components/ui/alert-dialog/AlertDialogContent.vue
index 4597f0dc..ea0962b6 100644
--- a/resources/js/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/resources/js/components/ui/alert-dialog/AlertDialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 max-h-[85dvh] overflow-y-auto rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           props.class,
         )
       "
diff --git a/resources/js/pages/billing/Processing.vue b/resources/js/pages/billing/Processing.vue
index 295acb42..f16f026f 100644
--- a/resources/js/pages/billing/Processing.vue
+++ b/resources/js/pages/billing/Processing.vue
@@ -109,7 +109,7 @@ onUnmounted(() => {
                     <span class="size-3 rounded-full border border-foreground bg-amber-300" />
                     <span class="size-3 rounded-full border border-foreground bg-emerald-300" />
                 </div>
-                <div class="ml-2 truncate text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                <div class="ml-2 min-w-0 truncate text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                     trypost.it · checkout
                 </div>
                 <span class="ml-auto inline-flex items-center gap-1.5 rounded-md border-2 border-foreground bg-foreground px-2 py-0.5 text-[10px] font-black uppercase tracking-widest text-background shadow-2xs">