From f5a9e40bc17fcddb90dabc1a8dbe4145921251da Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 19:15:58 -0300
Subject: [PATCH] refactor(ui): mobile polish and dead-state cleanup from
 review

- Restore desktop tab spacing (lg:gap-6) on the automation tabs
- break-words / viewport width caps on the AI review chips, lightbox alt overlay, and pick-time popover
- Remove the now-unused hoveredCommentId state after the comment toolbar became touch-visible
---
 resources/js/components/ImagePreviewDialog.vue            | 2 +-
 resources/js/components/automations/AutomationTabsNav.vue | 2 +-
 resources/js/components/posts/PickTimePopover.vue         | 4 ++--
 resources/js/components/posts/ai/AiReviewDialog.vue       | 4 ++--
 resources/js/components/posts/editor/CommentsTab.vue      | 7 ++-----
 5 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/ImagePreviewDialog.vue b/resources/js/components/ImagePreviewDialog.vue
index 100dd5f0..de1f49f7 100644
--- a/resources/js/components/ImagePreviewDialog.vue
+++ b/resources/js/components/ImagePreviewDialog.vue
@@ -141,7 +141,7 @@ defineExpose({ open, openCollection, close });
                 <div
                     v-if="currentItem?.altText"
                     data-testid="lightbox-alt-text"
-                    class="pointer-events-none absolute left-1/2 max-w-2xl -translate-x-1/2 rounded-lg bg-black/70 px-4 py-2 text-center text-sm text-white backdrop-blur-sm"
+                    class="pointer-events-none absolute left-1/2 max-w-[calc(100%-2rem)] -translate-x-1/2 rounded-lg bg-black/70 px-4 py-2 text-center text-sm text-white backdrop-blur-sm sm:max-w-2xl"
                     :class="showNav ? 'bottom-14' : 'bottom-4'"
                 >
                     {{ currentItem.altText }}
diff --git a/resources/js/components/automations/AutomationTabsNav.vue b/resources/js/components/automations/AutomationTabsNav.vue
index 85b5886f..2aa3d6fa 100644
--- a/resources/js/components/automations/AutomationTabsNav.vue
+++ b/resources/js/components/automations/AutomationTabsNav.vue
@@ -18,7 +18,7 @@ const tabs = computed(() => [
 </script>
 
 <template>
-    <nav class="flex items-center gap-4 overflow-x-auto border-b-2 border-foreground/10 px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+    <nav class="flex items-center gap-4 overflow-x-auto border-b-2 border-foreground/10 px-4 lg:gap-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         <Link
             v-for="tab in tabs"
             :key="tab.key"
diff --git a/resources/js/components/posts/PickTimePopover.vue b/resources/js/components/posts/PickTimePopover.vue
index 970f946e..a91b076e 100644
--- a/resources/js/components/posts/PickTimePopover.vue
+++ b/resources/js/components/posts/PickTimePopover.vue
@@ -91,7 +91,7 @@ const remove = () => {
         <DialogTrigger as-child :disabled="disabled">
             <slot :open="open" />
         </DialogTrigger>
-        <DialogContent class="w-auto max-w-fit gap-0 p-0 sm:max-w-fit" :show-close-button="false">
+        <DialogContent class="w-auto max-w-[calc(100%-2rem)] gap-0 p-0 sm:max-w-fit" :show-close-button="false">
             <DialogTitle class="sr-only">{{ $t('posts.edit.pick_time') }}</DialogTitle>
 
             <div class="flex justify-center px-3 pt-3">
@@ -99,7 +99,7 @@ const remove = () => {
             </div>
 
             <div class="border-t p-3">
-                <div class="flex items-center gap-2">
+                <div class="flex flex-wrap items-center gap-2">
                     <span class="text-sm text-muted-foreground">{{ $t('posts.edit.time') }}</span>
                     <Select v-model="selectedHour">
                         <SelectTrigger class="w-[84px]"><SelectValue placeholder="HH" /></SelectTrigger>
diff --git a/resources/js/components/posts/ai/AiReviewDialog.vue b/resources/js/components/posts/ai/AiReviewDialog.vue
index 4c38ad6c..b2b42217 100644
--- a/resources/js/components/posts/ai/AiReviewDialog.vue
+++ b/resources/js/components/posts/ai/AiReviewDialog.vue
@@ -113,11 +113,11 @@ watch(open, (isOpen) => {
                     <div class="flex items-start justify-between gap-3">
                         <div class="min-w-0 flex-1 space-y-1.5">
                             <p class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm leading-relaxed">
-                                <span class="rounded-md border-2 border-foreground bg-rose-100 px-1.5 py-0.5 font-bold text-rose-700 line-through decoration-rose-700/60 shadow-2xs">
+                                <span class="rounded-md border-2 border-foreground bg-rose-100 px-1.5 py-0.5 font-bold text-rose-700 line-through decoration-rose-700/60 shadow-2xs break-words">
                                     {{ s.original }}
                                 </span>
                                 <span class="font-bold text-foreground/40">→</span>
-                                <span class="rounded-md border-2 border-foreground bg-emerald-100 px-1.5 py-0.5 font-bold text-emerald-700 shadow-2xs">
+                                <span class="rounded-md border-2 border-foreground bg-emerald-100 px-1.5 py-0.5 font-bold text-emerald-700 shadow-2xs break-words">
                                     {{ s.suggestion }}
                                 </span>
                             </p>
diff --git a/resources/js/components/posts/editor/CommentsTab.vue b/resources/js/components/posts/editor/CommentsTab.vue
index 32ea0158..a5720883 100644
--- a/resources/js/components/posts/editor/CommentsTab.vue
+++ b/resources/js/components/posts/editor/CommentsTab.vue
@@ -78,7 +78,6 @@ const newBody = ref('');
 const replyingTo = ref<Comment | null>(null);
 const editingComment = ref<Comment | null>(null);
 const editBody = ref('');
-const hoveredCommentId = ref<string | null>(null);
 const emojiPickerCommentId = ref<string | null>(null);
 
 const scrollContainer = ref<HTMLDivElement | null>(null);
@@ -494,8 +493,7 @@ watch(() => props.postId, () => {
                         :data-comment-id="comment.id"
                         class="group relative rounded-lg py-1.5 px-2 transition-colors"
                         :class="highlightedId === comment.id ? 'bg-violet-100 ring-2 ring-foreground' : 'hover:bg-foreground/5'"
-                        @mouseenter="hoveredCommentId = comment.id"
-                        @mouseleave="hoveredCommentId = null; emojiPickerCommentId = null"
+                        @mouseleave="emojiPickerCommentId = null"
                     >
                         <!-- Editing mode -->
                         <div v-if="editingComment?.id === comment.id" class="space-y-2">
@@ -607,8 +605,7 @@ watch(() => props.postId, () => {
                             :data-comment-id="reply.id"
                             class="group relative ml-8 rounded-lg py-1.5 px-2 transition-colors"
                             :class="highlightedId === reply.id ? 'bg-violet-100 ring-2 ring-foreground' : 'hover:bg-foreground/5'"
-                            @mouseenter="hoveredCommentId = reply.id"
-                            @mouseleave="hoveredCommentId = null; emojiPickerCommentId = null"
+                            @mouseleave="emojiPickerCommentId = null"
                         >
                             <!-- Editing reply -->
                             <div v-if="editingComment?.id === reply.id" class="space-y-2">