From a92a87ac46070c65c98c4235f78d44d5c4ffd701 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 18:38:20 -0300
Subject: [PATCH 01/30] fix(ui): make tabs scrollable and clamp dialogs/trigger
 for mobile

- TabsList scrolls horizontally instead of overflowing the page
- DialogContent caps height with internal scroll; DialogScrollContent gets the mobile width gutter
- SidebarTrigger tap target bumped to 36px
---
 resources/js/components/ui/dialog/DialogContent.vue       | 2 +-
 resources/js/components/ui/dialog/DialogScrollContent.vue | 2 +-
 resources/js/components/ui/sidebar/SidebarTrigger.vue     | 2 +-
 resources/js/components/ui/tabs/TabsList.vue              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/dialog/DialogContent.vue b/resources/js/components/ui/dialog/DialogContent.vue
index c39c04c0..5376f217 100644
--- a/resources/js/components/ui/dialog/DialogContent.vue
+++ b/resources/js/components/ui/dialog/DialogContent.vue
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-card 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-2xl border-2 border-foreground p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-card 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-2xl border-2 border-foreground p-6 shadow-lg duration-200 sm:max-w-lg',
           props.class,
         )"
     >
diff --git a/resources/js/components/ui/dialog/DialogScrollContent.vue b/resources/js/components/ui/dialog/DialogScrollContent.vue
index 90759a55..ded73f7e 100644
--- a/resources/js/components/ui/dialog/DialogScrollContent.vue
+++ b/resources/js/components/ui/dialog/DialogScrollContent.vue
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogContent
         :class="
           cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            'relative z-50 grid w-full max-w-[calc(100%-2rem)] my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:max-w-lg sm:rounded-lg md:w-full',
             props.class,
           )
         "
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
index 926b753c..eaacdcf2 100644
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ b/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -18,7 +18,7 @@ const { isMobile, state, toggleSidebar } = useSidebar()
     data-slot="sidebar-trigger"
     variant="ghost"
     size="icon"
-    :class="cn('h-7 w-7', props.class)"
+    :class="cn('h-9 w-9', props.class)"
     @click="toggleSidebar"
   >
     <IconLayoutSidebarLeftExpand v-if="isMobile || state === 'collapsed'" />
diff --git a/resources/js/components/ui/tabs/TabsList.vue b/resources/js/components/ui/tabs/TabsList.vue
index 757239c6..02855184 100644
--- a/resources/js/components/ui/tabs/TabsList.vue
+++ b/resources/js/components/ui/tabs/TabsList.vue
@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, "class")
     data-slot="tabs-list"
     v-bind="delegatedProps"
     :class="cn(
-      'inline-flex h-10 w-fit items-center gap-2',
+      'inline-flex h-10 w-fit max-w-full items-center gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
       props.class,
     )"
   >

From b7b38097900e3e383590c911e654e5b2c7702cdd Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 18:38:20 -0300
Subject: [PATCH 02/30] feat(posts): make the post editor usable on mobile

- Top switcher (Compose / Channels / Preview / Comments) reveals the panel that was hidden below lg
- Sticky bottom action bar puts schedule/publish/delete within thumb reach
- Composer media actions and comment toolbar are visible on touch (no hover needed); media grid is 3-up
- Clamp media picker and emoji picker widths to the viewport
---
 lang/ar/posts.php                             |   1 +
 lang/de/posts.php                             |   1 +
 lang/el/posts.php                             |   1 +
 lang/en/posts.php                             |   1 +
 lang/es/posts.php                             |   1 +
 lang/fr/posts.php                             |   1 +
 lang/it/posts.php                             |   1 +
 lang/ja/posts.php                             |   1 +
 lang/ko/posts.php                             |   1 +
 lang/nl/posts.php                             |   1 +
 lang/pl/posts.php                             |   1 +
 lang/pt-BR/posts.php                          |   1 +
 lang/ru/posts.php                             |   1 +
 lang/tr/posts.php                             |   1 +
 lang/zh/posts.php                             |   1 +
 resources/js/components/posts/EmojiPicker.vue |   2 +-
 .../js/components/posts/MediaPickerDialog.vue |   2 +-
 .../components/posts/editor/CommentsTab.vue   |  14 +--
 .../posts/editor/PostEditorActionBar.vue      |  52 ++++++++
 .../posts/editor/PostEditorActions.vue        | 116 ++++++++++++++++++
 .../posts/editor/PostEditorComposer.vue       |  11 +-
 .../posts/editor/PostEditorHeader.vue         | 116 ++++++------------
 .../posts/editor/PostEditorMobileNav.vue      |  33 +++++
 .../posts/editor/PostEditorTabs.vue           |   4 +-
 .../components/posts/editor/ScheduleTab.vue   |   6 +-
 resources/js/pages/posts/Edit.vue             |  48 +++++++-
 tests/Browser/MobileEditorTest.php            | 103 ++++++++++++++++
 27 files changed, 420 insertions(+), 102 deletions(-)
 create mode 100644 resources/js/components/posts/editor/PostEditorActionBar.vue
 create mode 100644 resources/js/components/posts/editor/PostEditorActions.vue
 create mode 100644 resources/js/components/posts/editor/PostEditorMobileNav.vue
 create mode 100644 tests/Browser/MobileEditorTest.php

diff --git a/lang/ar/posts.php b/lang/ar/posts.php
index 365d124d..a85c56fc 100644
--- a/lang/ar/posts.php
+++ b/lang/ar/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'ألغِ الجدولة للتعديل',
 
         'tabs' => [
+            'compose' => 'الكتابة',
             'preview' => 'معاينة',
             'channels' => 'القنوات',
             'comments' => 'التعليقات',
diff --git a/lang/de/posts.php b/lang/de/posts.php
index c70ce333..77c50c03 100644
--- a/lang/de/posts.php
+++ b/lang/de/posts.php
@@ -365,6 +365,7 @@
         'unschedule_cta' => 'Zum Bearbeiten Planung aufheben',
 
         'tabs' => [
+            'compose' => 'Verfassen',
             'preview' => 'Vorschau',
             'channels' => 'Kanäle',
             'comments' => 'Kommentare',
diff --git a/lang/el/posts.php b/lang/el/posts.php
index 991273b6..3fb7a85c 100644
--- a/lang/el/posts.php
+++ b/lang/el/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Αναίρεση προγραμματισμού για επεξεργασία',
 
         'tabs' => [
+            'compose' => 'Σύνταξη',
             'preview' => 'Προεπισκόπηση',
             'channels' => 'Κανάλια',
             'comments' => 'Σχόλια',
diff --git a/lang/en/posts.php b/lang/en/posts.php
index 50822682..35814545 100644
--- a/lang/en/posts.php
+++ b/lang/en/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Unschedule to edit',
 
         'tabs' => [
+            'compose' => 'Compose',
             'preview' => 'Preview',
             'channels' => 'Channels',
             'comments' => 'Comments',
diff --git a/lang/es/posts.php b/lang/es/posts.php
index abf2bd31..7bd1e4bd 100644
--- a/lang/es/posts.php
+++ b/lang/es/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Cancelar para editar',
 
         'tabs' => [
+            'compose' => 'Redactar',
             'preview' => 'Vista previa',
             'channels' => 'Canales',
             'comments' => 'Comentarios',
diff --git a/lang/fr/posts.php b/lang/fr/posts.php
index dd1e1ad9..599f37b4 100644
--- a/lang/fr/posts.php
+++ b/lang/fr/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Déprogrammer pour modifier',
 
         'tabs' => [
+            'compose' => 'Rédiger',
             'preview' => 'Aperçu',
             'channels' => 'Canaux',
             'comments' => 'Commentaires',
diff --git a/lang/it/posts.php b/lang/it/posts.php
index 74450429..dd525823 100644
--- a/lang/it/posts.php
+++ b/lang/it/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Annulla programmazione per modificare',
 
         'tabs' => [
+            'compose' => 'Componi',
             'preview' => 'Anteprima',
             'channels' => 'Canali',
             'comments' => 'Commenti',
diff --git a/lang/ja/posts.php b/lang/ja/posts.php
index 7be94ef1..b1f850be 100644
--- a/lang/ja/posts.php
+++ b/lang/ja/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => '予約を解除して編集',
 
         'tabs' => [
+            'compose' => '作成',
             'preview' => 'プレビュー',
             'channels' => 'チャンネル',
             'comments' => 'コメント',
diff --git a/lang/ko/posts.php b/lang/ko/posts.php
index d79c8d18..7da6343e 100644
--- a/lang/ko/posts.php
+++ b/lang/ko/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => '편집하려면 예약 취소',
 
         'tabs' => [
+            'compose' => '작성',
             'preview' => '미리보기',
             'channels' => '채널',
             'comments' => '댓글',
diff --git a/lang/nl/posts.php b/lang/nl/posts.php
index 0967738d..4b37a488 100644
--- a/lang/nl/posts.php
+++ b/lang/nl/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Planning opheffen om te bewerken',
 
         'tabs' => [
+            'compose' => 'Opstellen',
             'preview' => 'Voorbeeld',
             'channels' => 'Kanalen',
             'comments' => 'Reacties',
diff --git a/lang/pl/posts.php b/lang/pl/posts.php
index e07f0361..8a9daddb 100644
--- a/lang/pl/posts.php
+++ b/lang/pl/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Anuluj planowanie, aby edytować',
 
         'tabs' => [
+            'compose' => 'Utwórz',
             'preview' => 'Podgląd',
             'channels' => 'Kanały',
             'comments' => 'Komentarze',
diff --git a/lang/pt-BR/posts.php b/lang/pt-BR/posts.php
index 8c4cdeea..e5eb157c 100644
--- a/lang/pt-BR/posts.php
+++ b/lang/pt-BR/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Desagendar para editar',
 
         'tabs' => [
+            'compose' => 'Escrever',
             'preview' => 'Pré-visualização',
             'channels' => 'Canais',
             'comments' => 'Comentários',
diff --git a/lang/ru/posts.php b/lang/ru/posts.php
index febab44f..5e64fb0b 100644
--- a/lang/ru/posts.php
+++ b/lang/ru/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Отменить планирование для редактирования',
 
         'tabs' => [
+            'compose' => 'Написать',
             'preview' => 'Предпросмотр',
             'channels' => 'Каналы',
             'comments' => 'Комментарии',
diff --git a/lang/tr/posts.php b/lang/tr/posts.php
index 7d499c6f..418f7e65 100644
--- a/lang/tr/posts.php
+++ b/lang/tr/posts.php
@@ -365,6 +365,7 @@
         'unschedule_cta' => 'Düzenlemek için zamanlamayı kaldır',
 
         'tabs' => [
+            'compose' => 'Oluştur',
             'preview' => 'Önizleme',
             'channels' => 'Kanallar',
             'comments' => 'Yorumlar',
diff --git a/lang/zh/posts.php b/lang/zh/posts.php
index 77df4cfe..90293186 100644
--- a/lang/zh/posts.php
+++ b/lang/zh/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => '取消排期以编辑',
 
         'tabs' => [
+            'compose' => '撰写',
             'preview' => '预览',
             'channels' => '渠道',
             'comments' => '评论',
diff --git a/resources/js/components/posts/EmojiPicker.vue b/resources/js/components/posts/EmojiPicker.vue
index 8b153e51..b0836a3f 100644
--- a/resources/js/components/posts/EmojiPicker.vue
+++ b/resources/js/components/posts/EmojiPicker.vue
@@ -121,7 +121,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <div class="flex w-[340px] flex-col overflow-hidden rounded-[10px] bg-card text-foreground">
+    <div class="flex w-[min(340px,calc(100vw-2rem))] flex-col overflow-hidden rounded-[10px] bg-card text-foreground">
         <div class="border-b-2 border-foreground/10 p-2">
             <Input
                 v-model="search"
diff --git a/resources/js/components/posts/MediaPickerDialog.vue b/resources/js/components/posts/MediaPickerDialog.vue
index acbde4b1..fbffeda0 100644
--- a/resources/js/components/posts/MediaPickerDialog.vue
+++ b/resources/js/components/posts/MediaPickerDialog.vue
@@ -50,7 +50,7 @@ defineExpose({ open, close });
 
 <template>
     <Dialog v-model:open="isOpen">
-        <DialogContent class="flex h-[85vh] max-w-5xl flex-col gap-0 p-0 sm:max-w-5xl">
+        <DialogContent class="flex h-[85vh] max-w-[calc(100%-2rem)] flex-col gap-0 p-0 sm:max-w-5xl">
             <DialogHeader class="border-b px-6 py-4">
                 <DialogTitle>{{ trans('posts.edit.media_picker.title') }}</DialogTitle>
             </DialogHeader>
diff --git a/resources/js/components/posts/editor/CommentsTab.vue b/resources/js/components/posts/editor/CommentsTab.vue
index 95bf2dba..32ea0158 100644
--- a/resources/js/components/posts/editor/CommentsTab.vue
+++ b/resources/js/components/posts/editor/CommentsTab.vue
@@ -556,19 +556,19 @@ watch(() => props.postId, () => {
 
                                 <!-- Floating toolbar -->
                                 <div
-                                    v-if="hoveredCommentId === comment.id && editingComment?.id !== comment.id"
-                                    class="absolute -top-3 right-2 z-50 flex items-center gap-0.5 rounded-md border-2 border-foreground bg-card px-1 py-0.5 shadow-2xs"
+                                    v-if="editingComment?.id !== comment.id"
+                                    class="absolute -top-3 right-2 z-50 flex items-center gap-0.5 rounded-md border-2 border-foreground bg-card px-1 py-0.5 opacity-100 shadow-2xs transition-opacity lg:opacity-0 lg:group-hover:opacity-100 lg:group-focus-within:opacity-100"
                                 >
                                     <TooltipProvider :delay-duration="200">
                                         <Tooltip>
                                             <TooltipTrigger as-child>
-                                                <button class="rounded p-1 text-muted-foreground hover:bg-foreground/5 hover:text-foreground" @mouseenter="showEmojiPicker(comment.id)"><IconMoodSmile class="h-3.5 w-3.5" /></button>
+                                                <button class="rounded p-1 text-muted-foreground hover:bg-foreground/5 hover:text-foreground" @click="showEmojiPicker(comment.id)"><IconMoodSmile class="h-3.5 w-3.5" /></button>
                                             </TooltipTrigger>
                                             <TooltipContent side="top" class="text-xs">React</TooltipContent>
                                         </Tooltip>
                                         <Tooltip>
                                             <TooltipTrigger as-child>
-                                                <button class="rounded p-1 text-muted-foreground hover:bg-foreground/5 hover:text-foreground" @click="startReply(comment)"><IconArrowBackUp class="h-3.5 w-3.5" /></button>
+                                                <button data-testid="comment-reply" class="rounded p-1 text-muted-foreground hover:bg-foreground/5 hover:text-foreground" @click="startReply(comment)"><IconArrowBackUp class="h-3.5 w-3.5" /></button>
                                             </TooltipTrigger>
                                             <TooltipContent side="top" class="text-xs">{{ $t('comments.reply') }}</TooltipContent>
                                         </Tooltip>
@@ -669,13 +669,13 @@ watch(() => props.postId, () => {
 
                                     <!-- Reply floating toolbar -->
                                     <div
-                                        v-if="hoveredCommentId === reply.id && editingComment?.id !== reply.id"
-                                        class="absolute -top-3 right-2 z-50 flex items-center gap-0.5 rounded-md border-2 border-foreground bg-card px-1 py-0.5 shadow-2xs"
+                                        v-if="editingComment?.id !== reply.id"
+                                        class="absolute -top-3 right-2 z-50 flex items-center gap-0.5 rounded-md border-2 border-foreground bg-card px-1 py-0.5 opacity-100 shadow-2xs transition-opacity lg:opacity-0 lg:group-hover:opacity-100 lg:group-focus-within:opacity-100"
                                     >
                                         <TooltipProvider :delay-duration="200">
                                             <Tooltip>
                                                 <TooltipTrigger as-child>
-                                                    <button class="rounded p-1 text-muted-foreground hover:bg-foreground/5 hover:text-foreground" @mouseenter="showEmojiPicker(reply.id)"><IconMoodSmile class="h-3.5 w-3.5" /></button>
+                                                    <button class="rounded p-1 text-muted-foreground hover:bg-foreground/5 hover:text-foreground" @click="showEmojiPicker(reply.id)"><IconMoodSmile class="h-3.5 w-3.5" /></button>
                                                 </TooltipTrigger>
                                                 <TooltipContent side="top" class="text-xs">React</TooltipContent>
                                             </Tooltip>
diff --git a/resources/js/components/posts/editor/PostEditorActionBar.vue b/resources/js/components/posts/editor/PostEditorActionBar.vue
new file mode 100644
index 00000000..40d35eb5
--- /dev/null
+++ b/resources/js/components/posts/editor/PostEditorActionBar.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import PostEditorActions from '@/components/posts/editor/PostEditorActions.vue';
+
+withDefaults(
+    defineProps<{
+        isReadOnly: boolean;
+        isScheduled: boolean;
+        canEdit?: boolean;
+        isSaving: boolean;
+        isSubmitting: boolean;
+        isPostActionDisabled: boolean;
+        postActionTooltip: string;
+        pickTimeLabel: string;
+    }>(),
+    {
+        canEdit: true,
+    },
+);
+
+const hasPickedTime = defineModel<boolean>('hasPickedTime', { required: true });
+const scheduledDateTime = defineModel<string>('scheduledDateTime', { required: true });
+
+const emit = defineEmits<{
+    (e: 'delete'): void;
+    (e: 'unschedule'): void;
+    (e: 'submit', status: string): void;
+}>();
+</script>
+
+<template>
+    <div
+        v-if="canEdit && !isReadOnly"
+        data-testid="editor-action-bar"
+        class="sticky bottom-0 z-30 flex items-center justify-end gap-2 border-t-2 border-foreground bg-card px-4 py-3 lg:hidden"
+    >
+        <PostEditorActions
+            :is-read-only="isReadOnly"
+            :is-scheduled="isScheduled"
+            :can-edit="canEdit"
+            :is-saving="isSaving"
+            :is-submitting="isSubmitting"
+            :is-post-action-disabled="isPostActionDisabled"
+            :post-action-tooltip="postActionTooltip"
+            :pick-time-label="pickTimeLabel"
+            v-model:has-picked-time="hasPickedTime"
+            v-model:scheduled-date-time="scheduledDateTime"
+            @delete="emit('delete')"
+            @unschedule="emit('unschedule')"
+            @submit="emit('submit', $event)"
+        />
+    </div>
+</template>
diff --git a/resources/js/components/posts/editor/PostEditorActions.vue b/resources/js/components/posts/editor/PostEditorActions.vue
new file mode 100644
index 00000000..c422833e
--- /dev/null
+++ b/resources/js/components/posts/editor/PostEditorActions.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { IconCalendar, IconTrash } from '@tabler/icons-vue';
+import { computed } from 'vue';
+
+import InputError from '@/components/InputError.vue';
+import PickTimePopover from '@/components/posts/PickTimePopover.vue';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { usePageErrors } from '@/composables/usePageErrors';
+import { PostStatus } from '@/types/post';
+
+withDefaults(
+    defineProps<{
+        isReadOnly: boolean;
+        isScheduled: boolean;
+        canEdit?: boolean;
+        isSaving: boolean;
+        isSubmitting: boolean;
+        isPostActionDisabled: boolean;
+        postActionTooltip: string;
+        pickTimeLabel: string;
+    }>(),
+    {
+        canEdit: true,
+    },
+);
+
+const hasPickedTime = defineModel<boolean>('hasPickedTime', { required: true });
+const scheduledDateTime = defineModel<string>('scheduledDateTime', { required: true });
+
+const emit = defineEmits<{
+    (e: 'delete'): void;
+    (e: 'unschedule'): void;
+    (e: 'submit', status: string): void;
+}>();
+
+const errors = usePageErrors();
+const scheduledAtError = computed(() => errors.value.scheduled_at);
+</script>
+
+<template>
+    <Button
+        v-if="isScheduled && canEdit"
+        type="button"
+        variant="outline"
+        class="bg-background hover:bg-violet-50"
+        :disabled="isSubmitting"
+        @click="emit('unschedule')"
+    >
+        {{ $t('posts.edit.unschedule_cta') }}
+    </Button>
+
+    <div v-else-if="!isReadOnly && canEdit" class="flex flex-col items-end gap-1">
+        <div class="flex items-center gap-2">
+            <TooltipProvider>
+                <Tooltip>
+                    <TooltipTrigger as-child>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="icon"
+                            class="bg-rose-100 hover:bg-rose-200"
+                            :disabled="isSaving || isSubmitting"
+                            @click="emit('delete')"
+                        >
+                            <IconTrash class="size-4 text-rose-700" />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{{ $t('posts.edit.delete') }}</TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger as-child>
+                        <span tabindex="0">
+                            <PickTimePopover
+                                v-model="scheduledDateTime"
+                                :disabled="isPostActionDisabled"
+                                @confirm="hasPickedTime = true"
+                            >
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    :disabled="isPostActionDisabled"
+                                >
+                                    <IconCalendar class="size-4" />
+                                    {{ pickTimeLabel }}
+                                </Button>
+                            </PickTimePopover>
+                        </span>
+                    </TooltipTrigger>
+                    <TooltipContent v-if="postActionTooltip" class="max-w-xs whitespace-pre-line">
+                        {{ postActionTooltip }}
+                    </TooltipContent>
+                </Tooltip>
+
+                <Tooltip>
+                    <TooltipTrigger as-child>
+                        <span tabindex="0">
+                            <Button
+                                type="button"
+                                :disabled="isPostActionDisabled"
+                                @click="emit('submit', hasPickedTime ? PostStatus.Scheduled : PostStatus.Publishing)"
+                            >
+                                {{ hasPickedTime ? $t('posts.edit.schedule') : $t('posts.edit.post_now') }}
+                            </Button>
+                        </span>
+                    </TooltipTrigger>
+                    <TooltipContent v-if="postActionTooltip" class="max-w-xs whitespace-pre-line">
+                        {{ postActionTooltip }}
+                    </TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
+        </div>
+        <InputError :message="scheduledAtError" />
+    </div>
+</template>
diff --git a/resources/js/components/posts/editor/PostEditorComposer.vue b/resources/js/components/posts/editor/PostEditorComposer.vue
index e3ffa21c..775c615f 100644
--- a/resources/js/components/posts/editor/PostEditorComposer.vue
+++ b/resources/js/components/posts/editor/PostEditorComposer.vue
@@ -237,7 +237,7 @@ const onAltTextSave = (alt: string): void => {
         <div class="relative">
             <!-- Media grid (top) — always shown so "Add" tile is discoverable -->
             <div v-if="!readOnly || media.length" class="mb-6">
-                <div class="grid grid-cols-4 gap-2">
+                <div class="grid grid-cols-3 gap-2 sm:grid-cols-4">
                     <div
                         v-for="(item, index) in media"
                         :key="item.id"
@@ -320,7 +320,7 @@ const onAltTextSave = (alt: string): void => {
 
                         <span
                             v-if="media.length > 1 && !readOnly"
-                            class="absolute left-1.5 top-1.5 inline-flex size-6 cursor-grab items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground opacity-0 shadow-2xs transition-opacity group-hover:opacity-100 group-focus:opacity-100"
+                            class="absolute left-1.5 top-1.5 inline-flex size-6 cursor-grab items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground opacity-100 shadow-2xs lg:opacity-0 transition-opacity lg:group-hover:opacity-100 lg:group-focus:opacity-100"
                         >
                             <IconGripVertical class="size-3.5" />
                         </span>
@@ -328,7 +328,7 @@ const onAltTextSave = (alt: string): void => {
                         <button
                             v-if="canRegenerateWithAi(item)"
                             type="button"
-                            class="absolute bottom-1.5 left-1.5 inline-flex h-6 cursor-pointer items-center gap-1 rounded-md border-2 border-foreground bg-card px-1.5 text-[10px] font-semibold text-foreground opacity-0 shadow-2xs transition-all hover:bg-violet-100 group-hover:opacity-100 group-focus:opacity-100"
+                            class="absolute bottom-1.5 left-1.5 inline-flex h-6 cursor-pointer items-center gap-1 rounded-md border-2 border-foreground bg-card px-1.5 text-[10px] font-semibold text-foreground opacity-100 shadow-2xs lg:opacity-0 transition-all hover:bg-violet-100 lg:group-hover:opacity-100 lg:group-focus:opacity-100"
                             @click.stop="emit('open-ai-regenerate-image', item.id)"
                         >
                             <IconRefresh class="size-3" />
@@ -340,7 +340,7 @@ const onAltTextSave = (alt: string): void => {
                             type="button"
                             :title="$t('posts.edit.alt_text.edit')"
                             :aria-label="$t('posts.edit.alt_text.edit')"
-                            class="absolute right-9 top-1.5 inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground opacity-0 shadow-2xs transition-all hover:bg-violet-100 group-hover:opacity-100 group-focus:opacity-100"
+                            class="absolute right-9 top-1.5 inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground opacity-100 shadow-2xs lg:opacity-0 transition-all hover:bg-violet-100 lg:group-hover:opacity-100 lg:group-focus:opacity-100"
                             data-testid="alt-text-button"
                             @click.stop="openAltText(index)"
                         >
@@ -350,7 +350,8 @@ const onAltTextSave = (alt: string): void => {
                         <button
                             v-if="!readOnly"
                             type="button"
-                            class="absolute right-1.5 top-1.5 inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground opacity-0 shadow-2xs transition-all hover:bg-rose-100 hover:text-rose-700 group-hover:opacity-100 group-focus:opacity-100"
+                            class="absolute right-1.5 top-1.5 inline-flex size-6 cursor-pointer items-center justify-center rounded-md border-2 border-foreground bg-card text-foreground opacity-100 shadow-2xs lg:opacity-0 transition-all hover:bg-rose-100 hover:text-rose-700 lg:group-hover:opacity-100 lg:group-focus:opacity-100"
+                            data-testid="media-remove"
                             @click.stop="removeMedia(item.id)"
                         >
                             <IconTrash class="size-3.5" />
diff --git a/resources/js/components/posts/editor/PostEditorHeader.vue b/resources/js/components/posts/editor/PostEditorHeader.vue
index 085df40a..b507d909 100644
--- a/resources/js/components/posts/editor/PostEditorHeader.vue
+++ b/resources/js/components/posts/editor/PostEditorHeader.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import { IconCalendar, IconCircleCheck, IconLoader2, IconTrash } from '@tabler/icons-vue';
+import { IconCalendar, IconCircleCheck, IconLoader2 } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
-import InputError from '@/components/InputError.vue';
-import PickTimePopover from '@/components/posts/PickTimePopover.vue';
-import { Button } from '@/components/ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { usePageErrors } from '@/composables/usePageErrors';
+import PostEditorActions from '@/components/posts/editor/PostEditorActions.vue';
 import { PostStatus } from '@/types/post';
 
 interface Props {
@@ -39,9 +35,6 @@ const PUBLISHED_STATUSES: readonly string[] = [PostStatus.Published, PostStatus.
 const isReadOnly = computed(() => READONLY_STATUSES.includes(props.post.status));
 const isScheduled = computed(() => props.post.status === PostStatus.Scheduled);
 const isPublished = computed(() => PUBLISHED_STATUSES.includes(props.post.status));
-
-const errors = usePageErrors();
-const scheduledAtError = computed(() => errors.value.scheduled_at);
 </script>
 
 <template>
@@ -63,16 +56,23 @@ const scheduledAtError = computed(() => errors.value.scheduled_at);
                     {{ $t('posts.edit.scheduled_overlay_subtitle', { date: pickTimeLabel }) }}
                 </p>
             </div>
-            <Button
-                v-if="canEdit"
-                type="button"
-                variant="outline"
-                class="bg-background hover:bg-violet-50"
-                :disabled="isSubmitting"
-                @click="emit('unschedule')"
-            >
-                {{ $t('posts.edit.unschedule_cta') }}
-            </Button>
+            <div class="hidden lg:flex">
+                <PostEditorActions
+                    :is-read-only="isReadOnly"
+                    :is-scheduled="isScheduled"
+                    :can-edit="canEdit"
+                    :is-saving="isSaving"
+                    :is-submitting="isSubmitting"
+                    :is-post-action-disabled="isPostActionDisabled"
+                    :post-action-tooltip="postActionTooltip"
+                    :pick-time-label="pickTimeLabel"
+                    v-model:has-picked-time="hasPickedTime"
+                    v-model:scheduled-date-time="scheduledDateTime"
+                    @delete="emit('delete')"
+                    @unschedule="emit('unschedule')"
+                    @submit="emit('submit', $event)"
+                />
+            </div>
         </template>
 
         <template v-else>
@@ -95,68 +95,22 @@ const scheduledAtError = computed(() => errors.value.scheduled_at);
                 </span>
             </div>
 
-            <div v-if="!isReadOnly && canEdit" class="flex flex-col items-end gap-1">
-                <div class="flex items-center gap-2">
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger as-child>
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    size="icon"
-                                    class="bg-rose-100 hover:bg-rose-200"
-                                    :disabled="isSaving || isSubmitting"
-                                    @click="emit('delete')"
-                                >
-                                    <IconTrash class="size-4 text-rose-700" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>{{ $t('posts.edit.delete') }}</TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                            <TooltipTrigger as-child>
-                                <span tabindex="0">
-                                    <PickTimePopover
-                                        v-model="scheduledDateTime"
-                                        :disabled="isPostActionDisabled"
-                                        @confirm="hasPickedTime = true"
-                                    >
-                                        <Button
-                                            type="button"
-                                            variant="outline"
-                                            :disabled="isPostActionDisabled"
-                                        >
-                                            <IconCalendar class="size-4" />
-                                            {{ pickTimeLabel }}
-                                        </Button>
-                                    </PickTimePopover>
-                                </span>
-                            </TooltipTrigger>
-                            <TooltipContent v-if="postActionTooltip" class="max-w-xs whitespace-pre-line">
-                                {{ postActionTooltip }}
-                            </TooltipContent>
-                        </Tooltip>
-
-                        <Tooltip>
-                            <TooltipTrigger as-child>
-                                <span tabindex="0">
-                                    <Button
-                                        type="button"
-                                        :disabled="isPostActionDisabled"
-                                        @click="emit('submit', hasPickedTime ? PostStatus.Scheduled : PostStatus.Publishing)"
-                                    >
-                                        {{ hasPickedTime ? $t('posts.edit.schedule') : $t('posts.edit.post_now') }}
-                                    </Button>
-                                </span>
-                            </TooltipTrigger>
-                            <TooltipContent v-if="postActionTooltip" class="max-w-xs whitespace-pre-line">
-                                {{ postActionTooltip }}
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                </div>
-                <InputError :message="scheduledAtError" />
+            <div class="hidden lg:flex">
+                <PostEditorActions
+                    :is-read-only="isReadOnly"
+                    :is-scheduled="isScheduled"
+                    :can-edit="canEdit"
+                    :is-saving="isSaving"
+                    :is-submitting="isSubmitting"
+                    :is-post-action-disabled="isPostActionDisabled"
+                    :post-action-tooltip="postActionTooltip"
+                    :pick-time-label="pickTimeLabel"
+                    v-model:has-picked-time="hasPickedTime"
+                    v-model:scheduled-date-time="scheduledDateTime"
+                    @delete="emit('delete')"
+                    @unschedule="emit('unschedule')"
+                    @submit="emit('submit', $event)"
+                />
             </div>
         </template>
     </header>
diff --git a/resources/js/components/posts/editor/PostEditorMobileNav.vue b/resources/js/components/posts/editor/PostEditorMobileNav.vue
new file mode 100644
index 00000000..2ed5df43
--- /dev/null
+++ b/resources/js/components/posts/editor/PostEditorMobileNav.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+type MobileView = 'compose' | 'channels' | 'preview' | 'comments';
+
+const activeView = defineModel<MobileView>('activeView', { required: true });
+
+const items: { key: MobileView; label: string }[] = [
+    { key: 'compose', label: 'posts.edit.tabs.compose' },
+    { key: 'channels', label: 'posts.edit.tabs.channels' },
+    { key: 'preview', label: 'posts.edit.tabs.preview' },
+    { key: 'comments', label: 'posts.edit.tabs.comments' },
+];
+</script>
+
+<template>
+    <div
+        data-testid="editor-mobile-nav"
+        class="flex shrink-0 gap-1 overflow-x-auto border-b-2 border-foreground bg-card px-2 py-2 lg:hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    >
+        <button
+            v-for="item in items"
+            :key="item.key"
+            type="button"
+            :data-testid="`editor-nav-${item.key}`"
+            class="shrink-0 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-colors"
+            :class="activeView === item.key
+                ? 'border-foreground bg-violet-100 text-foreground'
+                : 'border-transparent text-foreground/60 hover:text-foreground'"
+            @click="activeView = item.key"
+        >
+            {{ $t(item.label) }}
+        </button>
+    </div>
+</template>
diff --git a/resources/js/components/posts/editor/PostEditorTabs.vue b/resources/js/components/posts/editor/PostEditorTabs.vue
index fdfd39b4..c5ef7555 100644
--- a/resources/js/components/posts/editor/PostEditorTabs.vue
+++ b/resources/js/components/posts/editor/PostEditorTabs.vue
@@ -91,7 +91,7 @@ defineExpose({
 
 <template>
     <Tabs v-model="activeTab" class="h-full flex flex-col">
-        <TabsList class="mx-4 mt-4 w-fit shrink-0 self-start">
+        <TabsList class="mx-4 mt-4 hidden w-fit shrink-0 self-start lg:inline-flex">
             <TabsTrigger value="preview">{{ $t('posts.edit.tabs.preview') }}</TabsTrigger>
             <TabsTrigger value="schedule">{{ $t('posts.edit.tabs.channels') }}</TabsTrigger>
             <TabsTrigger value="comments">{{ $t('posts.edit.tabs.comments') }}</TabsTrigger>
@@ -107,7 +107,7 @@ defineExpose({
             />
         </TabsContent>
 
-        <TabsContent value="schedule" force-mount :class="['flex-1 overflow-y-auto p-4', { hidden: activeTab !== 'schedule' }]">
+        <TabsContent value="schedule" force-mount data-testid="channels-panel" :class="['flex-1 overflow-y-auto p-4', { hidden: activeTab !== 'schedule' }]">
             <ScheduleTab
                 :post-platforms="post.post_platforms"
                 :selected-platform-ids="selectedPlatformIds"
diff --git a/resources/js/components/posts/editor/ScheduleTab.vue b/resources/js/components/posts/editor/ScheduleTab.vue
index d5cd391a..2bb93c23 100644
--- a/resources/js/components/posts/editor/ScheduleTab.vue
+++ b/resources/js/components/posts/editor/ScheduleTab.vue
@@ -173,11 +173,11 @@ const channels = computed<Channel[]>(() =>
                             :key="pp.id"
                             class="flex items-center justify-between rounded-xl border-2 border-foreground bg-card p-3 shadow-2xs"
                         >
-                            <div class="flex items-center gap-2">
-                                <span class="inline-flex size-5 items-center justify-center overflow-hidden rounded-full border-2 border-foreground bg-card">
+                            <div class="flex min-w-0 items-center gap-2">
+                                <span class="inline-flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-foreground bg-card">
                                     <img :src="getPlatformLogo(pp.platform)" :alt="pp.platform" class="size-full object-cover" />
                                 </span>
-                                <span class="text-sm font-bold text-foreground">{{ getPlatformDisplayName(pp) }}</span>
+                                <span class="truncate text-sm font-bold text-foreground">{{ getPlatformDisplayName(pp) }}</span>
                             </div>
                             <div class="flex items-center gap-2">
                                 <Badge v-if="pp.status === PostPlatformStatus.Published" variant="success">{{ $t('posts.edit.status.published') }}</Badge>
diff --git a/resources/js/pages/posts/Edit.vue b/resources/js/pages/posts/Edit.vue
index a9c14752..fdd2b06f 100644
--- a/resources/js/pages/posts/Edit.vue
+++ b/resources/js/pages/posts/Edit.vue
@@ -8,8 +8,10 @@ import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue';
 import AiGenerateDialog from '@/components/posts/ai/AiGenerateDialog.vue';
 import AiRegenerateImageDialog from '@/components/posts/ai/AiRegenerateImageDialog.vue';
 import AiReviewDialog from '@/components/posts/ai/AiReviewDialog.vue';
+import PostEditorActionBar from '@/components/posts/editor/PostEditorActionBar.vue';
 import PostEditorComposer from '@/components/posts/editor/PostEditorComposer.vue';
 import PostEditorHeader from '@/components/posts/editor/PostEditorHeader.vue';
+import PostEditorMobileNav from '@/components/posts/editor/PostEditorMobileNav.vue';
 import PostEditorTabs from '@/components/posts/editor/PostEditorTabs.vue';
 import { usePostEcho } from '@/composables/echo/usePostEcho';
 import {
@@ -209,6 +211,24 @@ const initialTabFromQuery = (() => {
 })();
 const initialHighlightCommentId = queryParams?.get('comment') ?? null;
 const activeTab = ref(initialTabFromQuery);
+
+// On mobile a single switcher (PostEditorMobileNav) drives which panel shows;
+// 'compose' reveals the composer, the rest reveal the tabs panel. It writes into
+// the shared `activeTab` (mapping 'channels' to the existing 'schedule' tab value)
+// so the tabs panel stays the single source of truth.
+type MobileView = 'compose' | 'channels' | 'preview' | 'comments';
+const mobileView = ref<MobileView>('compose');
+const mobileViewToTab: Record<Exclude<MobileView, 'compose'>, string> = {
+    channels: 'schedule',
+    preview: 'preview',
+    comments: 'comments',
+};
+watch(mobileView, (view) => {
+    if (view !== 'compose') {
+        activeTab.value = mobileViewToTab[view];
+    }
+});
+
 const deleteModal = ref<InstanceType<typeof ConfirmDeleteModal> | null>(null);
 const editorTabsRef = ref<InstanceType<typeof PostEditorTabs> | null>(null);
 
@@ -372,6 +392,8 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
                 @submit="submit"
             />
 
+            <PostEditorMobileNav v-model:active-view="mobileView" />
+
             <div class="relative flex-1 overflow-hidden">
                 <div
                     v-if="isPublishing"
@@ -394,7 +416,10 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
                     class="flex h-full"
                     :class="{ 'pointer-events-none select-none opacity-60': isScheduled }"
                 >
-                    <div class="w-full overflow-y-auto lg:w-2/3 lg:border-r-2 lg:border-foreground">
+                    <div
+                        class="w-full overflow-y-auto lg:w-2/3 lg:border-r-2 lg:border-foreground"
+                        :class="{ 'hidden lg:block': mobileView !== 'compose' }"
+                    >
                         <PostEditorComposer
                             v-model:content="content"
                             v-model:media="media"
@@ -409,7 +434,10 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
                         />
                     </div>
 
-                    <div class="hidden lg:block lg:w-1/3 overflow-hidden">
+                    <div
+                        class="w-full overflow-hidden lg:block lg:w-1/3"
+                        :class="{ 'hidden lg:block': mobileView === 'compose' }"
+                    >
                         <PostEditorTabs
                             ref="editorTabsRef"
                             v-model:active-tab="activeTab"
@@ -437,6 +465,22 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
                     </div>
                 </div>
             </div>
+
+            <PostEditorActionBar
+                :is-read-only="isReadOnly"
+                :is-scheduled="isScheduled"
+                :can-edit="canCreatePost"
+                :is-saving="isSaving"
+                :is-submitting="isSubmitting"
+                :is-post-action-disabled="isPostActionDisabled"
+                :post-action-tooltip="postActionTooltip"
+                :pick-time-label="pickTimeLabel"
+                v-model:has-picked-time="hasPickedTime"
+                v-model:scheduled-date-time="scheduledDateTime"
+                @delete="deletePost"
+                @unschedule="unschedulePost"
+                @submit="submit"
+            />
         </div>
     </AppLayout>
 
diff --git a/tests/Browser/MobileEditorTest.php b/tests/Browser/MobileEditorTest.php
new file mode 100644
index 00000000..12bf4e93
--- /dev/null
+++ b/tests/Browser/MobileEditorTest.php
@@ -0,0 +1,103 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Enums\UserWorkspace\Role;
+use App\Models\Post;
+use App\Models\PostComment;
+use App\Models\User;
+use App\Models\Workspace;
+
+/**
+ * Seed an authenticated user whose current workspace holds a fresh draft post,
+ * and act as them. Returns the post so each test can drive its editor.
+ */
+function seedMobileEditorPost(array $postAttributes = []): Post
+{
+    $user = User::factory()->create();
+    $workspace = Workspace::factory()->create(['user_id' => $user->id]);
+    $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
+    $user->update(['current_workspace_id' => $workspace->id]);
+
+    $post = Post::factory()->create(array_merge([
+        'workspace_id' => $workspace->id,
+        'user_id' => $user->id,
+        'content' => 'hello from mobile',
+    ], $postAttributes));
+
+    test()->actingAs($user);
+
+    return $post;
+}
+
+/**
+ * Poll browser-side until the testid element has laid out (width/height > 0).
+ * These Pest browser assertions do not auto-wait, so settle async UI first.
+ */
+function waitForTestId(mixed $page, string $testId): void
+{
+    $page->script(<<<JS
+        (async () => {
+            const sel = '[data-testid="{$testId}"]';
+            for (let i = 0; i < 100; i++) {
+                const el = document.querySelector(sel);
+                if (el && el.getBoundingClientRect().height > 0) return;
+                await new Promise((r) => setTimeout(r, 50));
+            }
+        })();
+    JS);
+}
+
+test('the schedule/publish action bar is reachable on a phone', function () {
+    $post = seedMobileEditorPost();
+
+    $page = visit(route('app.posts.edit', $post))->resize(375, 812);
+
+    waitForTestId($page, 'editor-action-bar');
+    $page->assertVisible('@editor-action-bar');
+});
+
+test('the mobile switcher reveals the channels panel', function () {
+    $post = seedMobileEditorPost();
+
+    $page = visit(route('app.posts.edit', $post))->resize(375, 812);
+
+    $page->assertVisible('@editor-mobile-nav')
+        ->click('@editor-nav-channels');
+
+    waitForTestId($page, 'channels-panel');
+    $page->assertVisible('@channels-panel');
+});
+
+test('media tile actions are visible on a phone without hover', function () {
+    $post = seedMobileEditorPost([
+        'media' => [[
+            'id' => 'm1',
+            'type' => 'image',
+            'mime_type' => 'image/png',
+            'path' => 'uploads/x.png',
+            'url' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+        ]],
+    ]);
+
+    $page = visit(route('app.posts.edit', $post))->resize(375, 812);
+
+    waitForTestId($page, 'media-remove');
+    $page->assertVisible('@media-remove');
+});
+
+test('comment actions are visible on a phone without hover', function () {
+    $post = seedMobileEditorPost();
+    PostComment::factory()->create([
+        'post_id' => $post->id,
+        'user_id' => $post->user_id,
+        'body' => 'a comment on the go',
+    ]);
+
+    $page = visit(route('app.posts.edit', $post))->resize(375, 812);
+
+    $page->click('@editor-nav-comments');
+
+    waitForTestId($page, 'comment-reply');
+    $page->assertVisible('@comment-reply');
+});

From ccf888258ddafb225880d06fe5045a23d7fd4708 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 18:38:20 -0300
Subject: [PATCH 03/30] feat(assets): touch-friendly gallery card actions on
 mobile

Uploads/Unsplash/Giphy card actions are visible on touch instead of hover-only, without the dark scrim on small screens.
---
 .../js/components/assets/GalleryBrowser.vue   |  7 ++--
 tests/Browser/MobileGalleryTest.php           | 38 +++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 tests/Browser/MobileGalleryTest.php

diff --git a/resources/js/components/assets/GalleryBrowser.vue b/resources/js/components/assets/GalleryBrowser.vue
index 8399688e..20e7d6ea 100644
--- a/resources/js/components/assets/GalleryBrowser.vue
+++ b/resources/js/components/assets/GalleryBrowser.vue
@@ -700,7 +700,7 @@ onUnmounted(() => {
 
                         <div
                             v-if="!isPicker"
-                            class="absolute inset-0 flex flex-col justify-between bg-foreground/60 p-2 opacity-0 transition-opacity group-hover:opacity-100"
+                            class="absolute inset-0 flex flex-col justify-between bg-transparent p-2 opacity-100 transition-opacity lg:bg-foreground/60 lg:opacity-0 lg:group-hover:opacity-100"
                         >
                             <div class="flex justify-end gap-1.5">
                                 <TooltipProvider>
@@ -717,6 +717,7 @@ onUnmounted(() => {
                                     variant="outline"
                                     size="icon"
                                     class="size-8 bg-rose-100 hover:bg-rose-200"
+                                    data-testid="gallery-asset-delete"
                                     @click.stop="handleDelete(asset.id)"
                                 >
                                     <IconTrash class="size-4 text-rose-700" />
@@ -771,7 +772,7 @@ onUnmounted(() => {
                                 />
                             </div>
 
-                            <div class="absolute inset-0 flex flex-col justify-between bg-foreground/60 p-2 opacity-0 transition-opacity group-hover:opacity-100">
+                            <div class="absolute inset-0 flex flex-col justify-between bg-transparent p-2 opacity-100 transition-opacity lg:bg-foreground/60 lg:opacity-0 lg:group-hover:opacity-100">
                                 <div class="flex justify-end gap-1.5">
                                     <TooltipProvider v-if="!isPicker">
                                         <Tooltip>
@@ -868,7 +869,7 @@ onUnmounted(() => {
                                 <img :src="gif.url_preview" :alt="gif.title || 'GIF'" class="size-full object-cover" loading="lazy" />
                             </div>
 
-                            <div class="absolute inset-0 flex flex-col justify-between bg-foreground/60 p-2 opacity-0 transition-opacity group-hover:opacity-100">
+                            <div class="absolute inset-0 flex flex-col justify-between bg-transparent p-2 opacity-100 transition-opacity lg:bg-foreground/60 lg:opacity-0 lg:group-hover:opacity-100">
                                 <div class="flex justify-end gap-1.5">
                                     <TooltipProvider v-if="!isPicker">
                                         <Tooltip>
diff --git a/tests/Browser/MobileGalleryTest.php b/tests/Browser/MobileGalleryTest.php
new file mode 100644
index 00000000..70983e15
--- /dev/null
+++ b/tests/Browser/MobileGalleryTest.php
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Enums\UserWorkspace\Role;
+use App\Models\Media;
+use App\Models\User;
+use App\Models\Workspace;
+
+test('gallery upload card actions are visible on a phone without hover', function () {
+    $user = User::factory()->create();
+    $workspace = Workspace::factory()->create(['user_id' => $user->id]);
+    $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
+    $user->update(['current_workspace_id' => $workspace->id]);
+
+    Media::factory()->for($workspace, 'mediable')->create([
+        'collection' => 'assets',
+        'original_filename' => 'on-the-go.jpg',
+    ]);
+
+    $this->actingAs($user);
+
+    $page = visit(route('app.assets.index'))->resize(375, 812);
+
+    // Uploads are fetched async after mount; settle before asserting.
+    $page->script(<<<'JS'
+        (async () => {
+            const sel = '[data-testid="gallery-asset-delete"]';
+            for (let i = 0; i < 100; i++) {
+                const el = document.querySelector(sel);
+                if (el && el.getBoundingClientRect().height > 0) return;
+                await new Promise((r) => setTimeout(r, 50));
+            }
+        })();
+    JS);
+
+    $page->assertVisible('@gallery-asset-delete');
+});

From 49282d2acb6a3add5580fc59d2a84f15fb29c111 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 18:38:20 -0300
Subject: [PATCH 04/30] fix(ui): stack page headers and toolbars on mobile

Non-wrapping justify-between headers now stack below sm; fixed-width searches go full-width. Calendar header wraps and seeds isMobile at setup to avoid the month-grid flash.
---
 resources/js/components/settings/UsersTab.vue     |  4 ++--
 resources/js/pages/automations/Metrics.vue        |  6 +++---
 resources/js/pages/labels/Index.vue               |  6 +++---
 resources/js/pages/posts/Calendar.vue             | 13 ++++++++-----
 resources/js/pages/posts/Index.vue                |  8 ++++----
 resources/js/pages/settings/workspace/ApiKeys.vue |  4 ++--
 resources/js/pages/signatures/Index.vue           |  8 ++++----
 resources/js/pages/workspaces/Show.vue            |  4 ++--
 8 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/settings/UsersTab.vue b/resources/js/components/settings/UsersTab.vue
index f1d7f385..c53fa875 100644
--- a/resources/js/components/settings/UsersTab.vue
+++ b/resources/js/components/settings/UsersTab.vue
@@ -83,7 +83,7 @@ const changeRole = (member: Member, role: string) => {
 
 <template>
     <div class="flex flex-col space-y-6">
-        <div class="flex items-center justify-between gap-4">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <HeadingSmall
                 :title="$t('settings.workspace.members_heading')"
                 :description="$t('settings.workspace.members_description')"
@@ -115,7 +115,7 @@ const changeRole = (member: Member, role: string) => {
                     <TableCell>
                         <DropdownMenu v-if="canManageTeam && member.id !== currentUserId">
                             <DropdownMenuTrigger as-child>
-                                <Button variant="outline" size="icon" class="size-8">
+                                <Button variant="outline" size="icon" class="size-9">
                                     <IconDots class="size-4" />
                                 </Button>
                             </DropdownMenuTrigger>
diff --git a/resources/js/pages/automations/Metrics.vue b/resources/js/pages/automations/Metrics.vue
index 386c0812..cafcfbd7 100644
--- a/resources/js/pages/automations/Metrics.vue
+++ b/resources/js/pages/automations/Metrics.vue
@@ -72,7 +72,7 @@ const platformLabel = (platform: string): string => platform.charAt(0).toUpperCa
 <template>
     <AutomationDetailLayout :automation="automation" current="metrics">
         <div class="space-y-6 p-4">
-            <div class="flex items-center justify-between gap-2">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                 <h2 class="text-sm font-semibold text-foreground/70">{{ $t('automations.metrics.overview') }}</h2>
                 <DateRangePicker v-model="dateRange" dusk="metrics-range" />
             </div>
@@ -85,9 +85,9 @@ const platformLabel = (platform: string): string => platform.charAt(0).toUpperCa
             </div>
 
             <div class="rounded-xl border-2 border-foreground/10 bg-card p-4">
-                <div class="mb-3 flex items-center justify-between">
+                <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
                     <h3 class="text-sm font-semibold">{{ $t('automations.metrics.runs_over_time') }}</h3>
-                    <div class="flex items-center gap-4">
+                    <div class="flex flex-wrap items-center gap-4">
                         <div v-for="item in legend" :key="item.key" class="flex items-center gap-1.5">
                             <span class="size-2.5 rounded-full" :style="{ backgroundColor: item.color }"></span>
                             <span class="text-xs text-foreground/60">{{ $t(item.label) }}</span>
diff --git a/resources/js/pages/labels/Index.vue b/resources/js/pages/labels/Index.vue
index 23e09aea..f5c1e7f7 100644
--- a/resources/js/pages/labels/Index.vue
+++ b/resources/js/pages/labels/Index.vue
@@ -85,13 +85,13 @@ const hasActiveSearch = computed(() => Boolean(searchQuery.value?.trim()));
         <div class="flex h-full flex-1 flex-col gap-6 px-6 py-8">
             <PageHeader :title="$t('labels.title')" :description="$t('labels.description')" />
 
-            <div class="flex items-center justify-between gap-3">
-                <div class="relative">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div class="relative w-full sm:w-auto">
                     <IconSearch class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                         v-model="searchQuery"
                         :placeholder="trans('labels.search')"
-                        class="w-64 pl-9"
+                        class="w-full pl-9 sm:w-64"
                     />
                 </div>
 
diff --git a/resources/js/pages/posts/Calendar.vue b/resources/js/pages/posts/Calendar.vue
index 4e2c04e6..6f717943 100644
--- a/resources/js/pages/posts/Calendar.vue
+++ b/resources/js/pages/posts/Calendar.vue
@@ -52,8 +52,9 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// Mobile detection
-const isMobile = ref(false);
+// Mobile detection — seed from the viewport at setup (available on client render
+// and SPA navigations) so a narrow screen never paints the month grid for a frame.
+const isMobile = ref(typeof window !== 'undefined' ? window.innerWidth < 1024 : false);
 const { canCreatePost } = useWorkspaceRole();
 
 const createPostUrl = (isoDate: string | null = null) =>
@@ -253,7 +254,7 @@ const formatTime = (scheduledAt: string): string => {
 
     <AppLayout :fullWidth="true">
         <div class="flex flex-col h-full">
-            <header class="grid shrink-0 grid-cols-[auto_1fr_auto] items-center gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:px-6">
+            <header class="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:grid md:grid-cols-[auto_1fr_auto] md:px-6">
                 <div class="flex items-center gap-2 pl-12 md:pl-0">
                     <Button variant="outline" size="icon" @click="navigate(-1)">
                         <IconChevronLeft class="size-4" />
@@ -264,14 +265,16 @@ const formatTime = (scheduledAt: string): string => {
                     <Button variant="outline" size="icon" @click="navigate(1)">
                         <IconChevronRight class="size-4" />
                     </Button>
-                    <DatePicker v-if="isMobile" v-model="selectedDate" @update:model-value="(v: any) => goToDate(v)" />
                 </div>
-                <div class="flex items-center justify-center">
+                <div class="hidden items-center justify-center md:flex">
                     <span class="truncate text-sm font-bold capitalize text-foreground">
                         {{ headerTitle }}
                     </span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <div v-if="isMobile" class="w-44">
+                        <DatePicker v-model="selectedDate" :show-time="false" @update:model-value="(v: any) => goToDate(v)" />
+                    </div>
                     <Tabs v-if="!isMobile" :default-value="view" @update:model-value="switchView">
                         <TabsList>
                             <TabsTrigger value="day">{{ $t('calendar.day') }}</TabsTrigger>
diff --git a/resources/js/pages/posts/Index.vue b/resources/js/pages/posts/Index.vue
index 4789bdd0..72ca0a72 100644
--- a/resources/js/pages/posts/Index.vue
+++ b/resources/js/pages/posts/Index.vue
@@ -183,14 +183,14 @@ useWorkspaceEcho(
             <PageHeader :title="pageTitle" />
 
             <!-- Toolbar -->
-            <div class="flex items-center justify-between gap-3">
-                <div class="flex items-center gap-3">
-                    <div class="relative">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div class="flex w-full items-center gap-3 sm:w-auto">
+                    <div class="relative w-full sm:w-auto">
                         <IconSearch class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-foreground/60" />
                         <Input
                             v-model="searchQuery"
                             :placeholder="trans('posts.search')"
-                            class="w-64 pl-9"
+                            class="w-full pl-9 sm:w-64"
                         />
                     </div>
 
diff --git a/resources/js/pages/settings/workspace/ApiKeys.vue b/resources/js/pages/settings/workspace/ApiKeys.vue
index fb17628f..b12444f2 100644
--- a/resources/js/pages/settings/workspace/ApiKeys.vue
+++ b/resources/js/pages/settings/workspace/ApiKeys.vue
@@ -73,7 +73,7 @@ const tabs = computed(() => [
 
             <SettingsTabsNav :tabs="tabs" active="api-keys" />
 
-            <div class="flex items-center justify-between gap-4">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                 <HeadingSmall
                     :title="$t('settings.api_keys.heading')"
                     :description="$t('settings.api_keys.description')"
@@ -128,7 +128,7 @@ const tabs = computed(() => [
                             <TableCell>
                                 <DropdownMenu>
                                     <DropdownMenuTrigger as-child>
-                                        <Button variant="outline" size="icon" class="size-8">
+                                        <Button variant="outline" size="icon" class="size-9">
                                             <IconDots class="size-4" />
                                         </Button>
                                     </DropdownMenuTrigger>
diff --git a/resources/js/pages/signatures/Index.vue b/resources/js/pages/signatures/Index.vue
index 2776d3b2..c464b131 100644
--- a/resources/js/pages/signatures/Index.vue
+++ b/resources/js/pages/signatures/Index.vue
@@ -91,13 +91,13 @@ const hasActiveSearch = computed(() => Boolean(searchQuery.value?.trim()));
         <div class="flex h-full flex-1 flex-col gap-6 px-6 py-8">
             <PageHeader :title="$t('signatures.title')" />
 
-            <div class="flex items-center justify-between gap-3">
-                <div class="relative">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div class="relative w-full sm:w-auto">
                     <IconSearch class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                     <Input
                         v-model="searchQuery"
                         :placeholder="trans('signatures.search')"
-                        class="w-64 pl-9"
+                        class="w-full pl-9 sm:w-64"
                     />
                 </div>
 
@@ -130,7 +130,7 @@ const hasActiveSearch = computed(() => Boolean(searchQuery.value?.trim()));
                                 @click="openEditDialog(signature)"
                             >
                                 <TableCell>{{ signature.name }}</TableCell>
-                                <TableCell class="max-w-md">
+                                <TableCell class="max-w-[160px] sm:max-w-md">
                                     <p class="truncate">{{ signature.content }}</p>
                                 </TableCell>
                                 <TableCell>{{ formatDate(signature.created_at) }}</TableCell>
diff --git a/resources/js/pages/workspaces/Show.vue b/resources/js/pages/workspaces/Show.vue
index 31cc00f1..4ea9d90d 100644
--- a/resources/js/pages/workspaces/Show.vue
+++ b/resources/js/pages/workspaces/Show.vue
@@ -41,14 +41,14 @@ defineProps<Props>();
 
     <AppLayout :title="workspace.name">
         <div class="flex flex-col gap-6 p-6">
-            <div class="flex items-center justify-between">
+            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                 <div>
                     <h1 class="text-2xl font-bold tracking-tight">{{ workspace.name }}</h1>
                     <p class="text-muted-foreground">
                         Workspace dashboard
                     </p>
                 </div>
-                <div class="flex gap-2">
+                <div class="flex flex-wrap gap-2">
                     <Link :href="settings.url()">
                         <Button variant="ghost" size="icon">
                             <IconSettings class="h-4 w-4" />

From 5118640a9cdac4cd9da613df9fffb7610b384792 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 18:38:20 -0300
Subject: [PATCH 05/30] feat(automations): mobile-safe builder with desktop
 notice

The node builder is gated to lg+ (its fixed side panels no longer overflow a phone); below lg it shows a 'works best on a larger screen' notice. Automation tabs scroll instead of cutting off.
---
 lang/ar/automations.php                       |  1 +
 lang/de/automations.php                       |  1 +
 lang/el/automations.php                       |  1 +
 lang/en/automations.php                       |  1 +
 lang/es/automations.php                       |  1 +
 lang/fr/automations.php                       |  1 +
 lang/it/automations.php                       |  1 +
 lang/ja/automations.php                       |  1 +
 lang/ko/automations.php                       |  1 +
 lang/nl/automations.php                       |  1 +
 lang/pl/automations.php                       |  1 +
 lang/pt-BR/automations.php                    |  1 +
 lang/ru/automations.php                       |  1 +
 lang/tr/automations.php                       |  1 +
 lang/zh/automations.php                       |  1 +
 .../automations/AutomationTabsNav.vue         |  4 +--
 resources/js/pages/automations/Form.vue       | 14 ++++++--
 tests/Browser/MobileAutomationsTest.php       | 34 +++++++++++++++++++
 18 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 tests/Browser/MobileAutomationsTest.php

diff --git a/lang/ar/automations.php b/lang/ar/automations.php
index 205938bb..229fedbc 100644
--- a/lang/ar/automations.php
+++ b/lang/ar/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'يعمل محرر الأتمتة بشكل أفضل على شاشة أكبر. افتحه على جهاز كمبيوتر مكتبي لإنشاء سير عملك.',
     'title' => 'الأتمتة',
     'default_name' => 'أتمتة جديدة',
 
diff --git a/lang/de/automations.php b/lang/de/automations.php
index 221ee5e9..69c5ca54 100644
--- a/lang/de/automations.php
+++ b/lang/de/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'Der Automatisierungs-Editor funktioniert am besten auf einem größeren Bildschirm. Öffne ihn auf einem Desktop, um deinen Workflow zu erstellen.',
     'title' => 'Automatisierungen',
     'default_name' => 'Neue Automatisierung',
 
diff --git a/lang/el/automations.php b/lang/el/automations.php
index 1fb558f1..d40fffbc 100644
--- a/lang/el/automations.php
+++ b/lang/el/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'Ο επεξεργαστής αυτοματισμών λειτουργεί καλύτερα σε μεγαλύτερη οθόνη. Άνοιξέ τον σε υπολογιστή για να δημιουργήσεις τη ροή εργασίας σου.',
     'title' => 'Αυτοματισμοί',
     'default_name' => 'Νέος αυτοματισμός',
 
diff --git a/lang/en/automations.php b/lang/en/automations.php
index 195fabdc..ecc6b353 100644
--- a/lang/en/automations.php
+++ b/lang/en/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'The automation editor works best on a larger screen. Open it on a desktop to build your workflow.',
     'title' => 'Automations',
     'default_name' => 'New automation',
 
diff --git a/lang/es/automations.php b/lang/es/automations.php
index 9313bf82..33df6255 100644
--- a/lang/es/automations.php
+++ b/lang/es/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'El editor de automatizaciones funciona mejor en una pantalla más grande. Ábrelo en un ordenador para crear tu flujo de trabajo.',
     'title' => 'Automatizaciones',
     'default_name' => 'Nueva automatización',
 
diff --git a/lang/fr/automations.php b/lang/fr/automations.php
index a036d4af..835282c8 100644
--- a/lang/fr/automations.php
+++ b/lang/fr/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'L\'éditeur d\'automatisation fonctionne mieux sur un grand écran. Ouvrez-le sur un ordinateur pour créer votre workflow.',
     'title' => 'Automatisations',
     'default_name' => 'Nouvelle automatisation',
 
diff --git a/lang/it/automations.php b/lang/it/automations.php
index 9ec57a28..37490287 100644
--- a/lang/it/automations.php
+++ b/lang/it/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'L\'editor delle automazioni funziona meglio su uno schermo più grande. Aprilo su un desktop per creare il tuo flusso di lavoro.',
     'title' => 'Automazioni',
     'default_name' => 'Nuova automazione',
 
diff --git a/lang/ja/automations.php b/lang/ja/automations.php
index d356c2a3..96f67641 100644
--- a/lang/ja/automations.php
+++ b/lang/ja/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'オートメーションエディタは大きな画面での利用に最適です。ワークフローを作成するにはデスクトップで開いてください。',
     'title' => 'オートメーション',
     'default_name' => '新しいオートメーション',
 
diff --git a/lang/ko/automations.php b/lang/ko/automations.php
index ba1e31fa..88af31f9 100644
--- a/lang/ko/automations.php
+++ b/lang/ko/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => '자동화 편집기는 큰 화면에서 가장 잘 작동합니다. 워크플로를 만들려면 데스크톱에서 열어주세요.',
     'title' => '자동화',
     'default_name' => '새 자동화',
 
diff --git a/lang/nl/automations.php b/lang/nl/automations.php
index 91c42751..8a0c082a 100644
--- a/lang/nl/automations.php
+++ b/lang/nl/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'De automatiserings-editor werkt het best op een groter scherm. Open het op een desktop om je workflow te bouwen.',
     'title' => 'Automatiseringen',
     'default_name' => 'Nieuwe automatisering',
 
diff --git a/lang/pl/automations.php b/lang/pl/automations.php
index dfb8e694..d40b87c8 100644
--- a/lang/pl/automations.php
+++ b/lang/pl/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'Edytor automatyzacji działa najlepiej na większym ekranie. Otwórz go na komputerze, aby zbudować swój workflow.',
     'title' => 'Automatyzacje',
     'default_name' => 'Nowa automatyzacja',
 
diff --git a/lang/pt-BR/automations.php b/lang/pt-BR/automations.php
index 1b971194..7b4bdfcf 100644
--- a/lang/pt-BR/automations.php
+++ b/lang/pt-BR/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'O editor de automações funciona melhor em uma tela maior. Abra no desktop para montar seu fluxo de trabalho.',
     'title' => 'Automações',
     'default_name' => 'Nova automação',
 
diff --git a/lang/ru/automations.php b/lang/ru/automations.php
index ab8a628b..2c059b83 100644
--- a/lang/ru/automations.php
+++ b/lang/ru/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'Редактор автоматизаций лучше всего работает на большом экране. Откройте его на компьютере, чтобы создать рабочий процесс.',
     'title' => 'Автоматизации',
     'default_name' => 'Новая автоматизация',
 
diff --git a/lang/tr/automations.php b/lang/tr/automations.php
index c541572c..a033f4f9 100644
--- a/lang/tr/automations.php
+++ b/lang/tr/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => 'Otomasyon düzenleyicisi daha büyük bir ekranda en iyi şekilde çalışır. İş akışınızı oluşturmak için masaüstünde açın.',
     'title' => 'Otomasyonlar',
     'default_name' => 'Yeni otomasyon',
 
diff --git a/lang/zh/automations.php b/lang/zh/automations.php
index f02d6d01..b1643e2d 100644
--- a/lang/zh/automations.php
+++ b/lang/zh/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => '自动化编辑器在更大的屏幕上体验最佳。请在电脑上打开以搭建你的工作流。',
     'title' => '自动化',
     'default_name' => '新建自动化',
 
diff --git a/resources/js/components/automations/AutomationTabsNav.vue b/resources/js/components/automations/AutomationTabsNav.vue
index 095a0bde..85b5886f 100644
--- a/resources/js/components/automations/AutomationTabsNav.vue
+++ b/resources/js/components/automations/AutomationTabsNav.vue
@@ -18,13 +18,13 @@ const tabs = computed(() => [
 </script>
 
 <template>
-    <nav class="flex items-center gap-6 border-b-2 border-foreground/10 px-4">
+    <nav class="flex items-center gap-4 overflow-x-auto border-b-2 border-foreground/10 px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         <Link
             v-for="tab in tabs"
             :key="tab.key"
             :href="tab.href"
             :dusk="`automation-tab-${tab.key}`"
-            class="-mb-0.5 border-b-2 py-2.5 text-sm font-medium transition-colors"
+            class="-mb-0.5 shrink-0 whitespace-nowrap border-b-2 py-2.5 text-sm font-medium transition-colors"
             :class="
                 tab.key === current
                     ? 'border-primary text-foreground'
diff --git a/resources/js/pages/automations/Form.vue b/resources/js/pages/automations/Form.vue
index 6a2748f6..cc8d5d00 100644
--- a/resources/js/pages/automations/Form.vue
+++ b/resources/js/pages/automations/Form.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, router } from '@inertiajs/vue3';
-import { IconBolt, IconLifebuoy } from '@tabler/icons-vue';
+import { IconBolt, IconDeviceDesktop, IconLifebuoy } from '@tabler/icons-vue';
 import { Background } from '@vue-flow/background';
 import { Controls } from '@vue-flow/controls';
 import {
@@ -475,7 +475,7 @@ const defaultEdgeOptions = {
                 </template>
             </AutomationHeader>
 
-            <div class="flex flex-1 overflow-hidden">
+            <div class="hidden flex-1 overflow-hidden lg:flex">
                 <main
                     class="automations-canvas-host relative flex-1"
                     @drop="onDrop"
@@ -547,6 +547,16 @@ const defaultEdgeOptions = {
                     />
                 </aside>
             </div>
+
+            <div
+                data-testid="automation-mobile-notice"
+                class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center lg:hidden"
+            >
+                <div class="inline-flex size-14 items-center justify-center rounded-2xl border-2 border-foreground bg-violet-200 shadow-2xs">
+                    <IconDeviceDesktop class="size-7 text-foreground" stroke-width="2" />
+                </div>
+                <p class="max-w-sm text-sm text-foreground/70">{{ $t('automations.mobile_notice') }}</p>
+            </div>
         </div>
     </AppLayout>
 </template>
diff --git a/tests/Browser/MobileAutomationsTest.php b/tests/Browser/MobileAutomationsTest.php
new file mode 100644
index 00000000..b286be88
--- /dev/null
+++ b/tests/Browser/MobileAutomationsTest.php
@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Enums\UserWorkspace\Role;
+use App\Models\Automation;
+use App\Models\User;
+use App\Models\Workspace;
+
+test('the automation builder shows a desktop-recommended notice on a phone', function () {
+    $user = User::factory()->create();
+    $workspace = Workspace::factory()->create(['user_id' => $user->id]);
+    $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
+    $user->update(['current_workspace_id' => $workspace->id]);
+
+    $automation = Automation::factory()->create(['workspace_id' => $workspace->id]);
+
+    $this->actingAs($user);
+
+    $page = visit(route('app.automations.workflow', $automation))->resize(375, 812);
+
+    $page->script(<<<'JS'
+        (async () => {
+            const sel = '[data-testid="automation-mobile-notice"]';
+            for (let i = 0; i < 100; i++) {
+                const el = document.querySelector(sel);
+                if (el && el.getBoundingClientRect().height > 0) return;
+                await new Promise((r) => setTimeout(r, 50));
+            }
+        })();
+    JS);
+
+    $page->assertVisible('@automation-mobile-notice');
+});

From 15eef281618e19ade493a4ccaed9ad18b4be632c Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 18:38:21 -0300
Subject: [PATCH 06/30] =?UTF-8?q?fix(ui):=20mobile=20polish=20=E2=80=94=20?=
 =?UTF-8?q?responsive=20headings,=20menu=20placement,=20truncation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PageHeader downscales on phones; workspace switcher opens within the viewport; OAuth page-selects go icon-only + truncate; invite info rows truncate.
---
 resources/js/components/AppSidebar.vue         |  2 +-
 resources/js/components/PageHeader.vue         |  2 +-
 .../js/pages/accounts/FacebookPageSelect.vue   |  4 ++--
 .../accounts/InstagramFacebookPageSelect.vue   |  4 ++--
 resources/js/pages/accounts/LinkedInSelect.vue |  8 ++++----
 resources/js/pages/auth/AcceptInvite.vue       | 18 +++++++++---------
 resources/js/pages/posts/Show.vue              |  2 +-
 7 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index ec4ade9f..24a33ad4 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -200,7 +200,7 @@ const handleCreateWorkspace = () => {
                             </SidebarMenuButton>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent class="w-(--reka-dropdown-menu-trigger-width) min-w-56"
-                            align="start" side="right" :side-offset="4">
+                            align="start" side="bottom" :side-offset="4">
                             <DropdownMenuLabel>
                                 {{ $t('sidebar.workspaces') }}
                             </DropdownMenuLabel>
diff --git a/resources/js/components/PageHeader.vue b/resources/js/components/PageHeader.vue
index af1dd22e..264fb55d 100644
--- a/resources/js/components/PageHeader.vue
+++ b/resources/js/components/PageHeader.vue
@@ -9,7 +9,7 @@ defineProps<{
 <template>
     <header class="space-y-1">
         <h1
-            class="text-4xl font-semibold leading-tight text-foreground"
+            class="text-2xl font-semibold leading-tight text-foreground sm:text-4xl"
             style="font-family: var(--font-display)"
         >
             {{ title }}
diff --git a/resources/js/pages/accounts/FacebookPageSelect.vue b/resources/js/pages/accounts/FacebookPageSelect.vue
index 7ef36d2d..71261a36 100644
--- a/resources/js/pages/accounts/FacebookPageSelect.vue
+++ b/resources/js/pages/accounts/FacebookPageSelect.vue
@@ -71,7 +71,7 @@ const pageUrl = (username: string | null): string | null =>
                     class="flex items-center gap-4 rounded-lg border bg-card p-4"
                     dusk="facebook-page"
                 >
-                    <Avatar class="h-12 w-12 rounded-lg">
+                    <Avatar class="h-12 w-12 shrink-0 rounded-lg">
                         <AvatarImage v-if="page.picture" :src="page.picture" class="object-cover" />
                         <AvatarFallback class="rounded-lg bg-blue-100 dark:bg-blue-900">
                             <IconBrandFacebook class="h-6 w-6 text-blue-600 dark:text-blue-400" />
@@ -92,7 +92,7 @@ const pageUrl = (username: string | null): string | null =>
                             @click="openExternal(pageUrl(page.username))"
                         >
                             <IconExternalLink class="h-4 w-4" />
-                            {{ $t('accounts.facebook.view') }}
+                            <span class="hidden sm:inline">{{ $t('accounts.facebook.view') }}</span>
                         </Button>
                         <Button size="sm" dusk="choose-facebook-page" :disabled="form.processing" @click="handleSelectPage(page)">
                             {{ $t('accounts.facebook.choose') }}
diff --git a/resources/js/pages/accounts/InstagramFacebookPageSelect.vue b/resources/js/pages/accounts/InstagramFacebookPageSelect.vue
index 2c65a5a7..90f06199 100644
--- a/resources/js/pages/accounts/InstagramFacebookPageSelect.vue
+++ b/resources/js/pages/accounts/InstagramFacebookPageSelect.vue
@@ -73,7 +73,7 @@ const igUrl = (username: string): string => `https://www.instagram.com/${usernam
                     class="flex items-center gap-4 rounded-lg border bg-card p-4"
                     dusk="instagram-page"
                 >
-                    <Avatar class="h-12 w-12 rounded-lg">
+                    <Avatar class="h-12 w-12 shrink-0 rounded-lg">
                         <AvatarImage v-if="page.ig_picture" :src="page.ig_picture" class="object-cover" />
                         <AvatarFallback class="rounded-lg bg-pink-100 dark:bg-pink-900">
                             <IconBrandInstagram class="h-6 w-6 text-pink-600 dark:text-pink-400" />
@@ -90,7 +90,7 @@ const igUrl = (username: string): string => `https://www.instagram.com/${usernam
                             @click="openExternal(igUrl(page.ig_username))"
                         >
                             <IconExternalLink class="h-4 w-4" />
-                            {{ $t('accounts.instagram_facebook.view') }}
+                            <span class="hidden sm:inline">{{ $t('accounts.instagram_facebook.view') }}</span>
                         </Button>
                         <Button size="sm" dusk="choose-instagram-page" :disabled="form.processing" @click="handleSelectPage(page)">
                             {{ $t('accounts.instagram_facebook.choose') }}
diff --git a/resources/js/pages/accounts/LinkedInSelect.vue b/resources/js/pages/accounts/LinkedInSelect.vue
index dba05c52..0a85d6d6 100644
--- a/resources/js/pages/accounts/LinkedInSelect.vue
+++ b/resources/js/pages/accounts/LinkedInSelect.vue
@@ -93,7 +93,7 @@ const organizationUrl = (vanity: string | null): string | null =>
                     class="flex items-center gap-4 rounded-lg border bg-card p-4"
                     dusk="linkedin-identity-person"
                 >
-                    <Avatar class="h-12 w-12 rounded-lg">
+                    <Avatar class="h-12 w-12 shrink-0 rounded-lg">
                         <AvatarImage v-if="person.avatar" :src="person.avatar" class="object-cover" />
                         <AvatarFallback class="rounded-lg bg-blue-100 dark:bg-blue-900">
                             <IconUser class="h-6 w-6 text-blue-600 dark:text-blue-400" />
@@ -121,7 +121,7 @@ const organizationUrl = (vanity: string | null): string | null =>
                             @click="openExternal(personUrl(person.vanity_name))"
                         >
                             <IconExternalLink class="h-4 w-4" />
-                            {{ $t('accounts.linkedin.view') }}
+                            <span class="hidden sm:inline">{{ $t('accounts.linkedin.view') }}</span>
                         </Button>
                         <Button size="sm" dusk="choose-person" :disabled="form.processing" @click="choosePerson">
                             {{ $t('accounts.linkedin.choose') }}
@@ -135,7 +135,7 @@ const organizationUrl = (vanity: string | null): string | null =>
                     class="flex items-center gap-4 rounded-lg border bg-card p-4"
                     dusk="linkedin-identity-organization"
                 >
-                    <Avatar class="h-12 w-12 rounded-lg">
+                    <Avatar class="h-12 w-12 shrink-0 rounded-lg">
                         <AvatarImage v-if="org.logo" :src="org.logo" class="object-cover" />
                         <AvatarFallback class="rounded-lg bg-blue-100 dark:bg-blue-900">
                             <IconBuilding class="h-6 w-6 text-blue-600 dark:text-blue-400" />
@@ -163,7 +163,7 @@ const organizationUrl = (vanity: string | null): string | null =>
                             @click="openExternal(organizationUrl(org.vanity_name))"
                         >
                             <IconExternalLink class="h-4 w-4" />
-                            {{ $t('accounts.linkedin.view') }}
+                            <span class="hidden sm:inline">{{ $t('accounts.linkedin.view') }}</span>
                         </Button>
                         <Button size="sm" dusk="choose-organization" :disabled="form.processing" @click="chooseOrganization(org)">
                             {{ $t('accounts.linkedin.choose') }}
diff --git a/resources/js/pages/auth/AcceptInvite.vue b/resources/js/pages/auth/AcceptInvite.vue
index d168ef32..ff3f5cfb 100644
--- a/resources/js/pages/auth/AcceptInvite.vue
+++ b/resources/js/pages/auth/AcceptInvite.vue
@@ -57,17 +57,17 @@ const inviteUrl = computed(() => `/invites/${props.invite.id}`);
                     </CardHeader>
                     <CardContent class="space-y-6">
                         <div class="rounded-lg bg-muted p-4 space-y-2">
-                            <div v-if="invite.workspace" class="flex justify-between text-sm">
-                                <span class="text-muted-foreground">{{ $t('auth.accept_invite.workspace') }}</span>
-                                <span class="font-medium">{{ invite.workspace.name }}</span>
+                            <div v-if="invite.workspace" class="flex justify-between gap-3 text-sm">
+                                <span class="shrink-0 text-muted-foreground">{{ $t('auth.accept_invite.workspace') }}</span>
+                                <span class="min-w-0 truncate font-medium">{{ invite.workspace.name }}</span>
                             </div>
-                            <div class="flex justify-between text-sm">
-                                <span class="text-muted-foreground">{{ $t('auth.accept_invite.your_role') }}</span>
-                                <span class="font-medium">{{ invite.role.label }}</span>
+                            <div class="flex justify-between gap-3 text-sm">
+                                <span class="shrink-0 text-muted-foreground">{{ $t('auth.accept_invite.your_role') }}</span>
+                                <span class="min-w-0 truncate font-medium">{{ invite.role.label }}</span>
                             </div>
-                            <div class="flex justify-between text-sm">
-                                <span class="text-muted-foreground">{{ $t('auth.accept_invite.email') }}</span>
-                                <span class="font-medium">{{ invite.email }}</span>
+                            <div class="flex justify-between gap-3 text-sm">
+                                <span class="shrink-0 text-muted-foreground">{{ $t('auth.accept_invite.email') }}</span>
+                                <span class="min-w-0 truncate font-medium">{{ invite.email }}</span>
                             </div>
                         </div>
 
diff --git a/resources/js/pages/posts/Show.vue b/resources/js/pages/posts/Show.vue
index 9a92ae44..103d0725 100644
--- a/resources/js/pages/posts/Show.vue
+++ b/resources/js/pages/posts/Show.vue
@@ -155,7 +155,7 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
                     <div class="mx-auto max-w-2xl px-6 py-10">
                         <!-- Media grid (top) — separate rounded tiles, 4-col -->
                         <div v-if="post.media.length > 0" class="mb-6">
-                            <div class="grid grid-cols-4 gap-2">
+                            <div class="grid grid-cols-3 gap-2 sm:grid-cols-4">
                                 <button
                                     v-for="(item, i) in post.media"
                                     :key="item.id"

From a4ed3bcdadb53e4adc1a89c991d028cdcaec276c Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 19:15:58 -0300
Subject: [PATCH 07/30] fix(ui): mobile fixes from second-pass review

- NotificationBell panel was fixed at left-[17rem] w-[22rem] and ran off-screen on a phone; now full-width-with-margins below sm
- Reserve top space for the floating sidebar trigger so page headings no longer sit under the hamburger on mobile
- automations/Index header stacks on mobile (was the one index page the first pass missed)
- Contain the preview phone mockup horizontally so it never breaks the page on narrow screens
- Comment bodies wrap long unbroken tokens (break-words)
---
 resources/js/components/CommentBody.vue             | 2 +-
 resources/js/components/NotificationBell.vue        | 2 +-
 resources/js/components/posts/editor/PreviewTab.vue | 2 +-
 resources/js/layouts/app/AppSidebarLayout.vue       | 9 ++++++---
 resources/js/pages/automations/Index.vue            | 2 +-
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/CommentBody.vue b/resources/js/components/CommentBody.vue
index c6d31bfd..a21d1093 100644
--- a/resources/js/components/CommentBody.vue
+++ b/resources/js/components/CommentBody.vue
@@ -42,7 +42,7 @@ const segments = computed<Segment[]>(() => {
 </script>
 
 <template>
-    <p class="mt-0.5 whitespace-pre-wrap text-sm">
+    <p class="mt-0.5 whitespace-pre-wrap break-words text-sm">
         <template v-for="(seg, i) in segments" :key="i">
             <span
                 v-if="seg.type === 'mention'"
diff --git a/resources/js/components/NotificationBell.vue b/resources/js/components/NotificationBell.vue
index 527c4825..f0dbe296 100644
--- a/resources/js/components/NotificationBell.vue
+++ b/resources/js/components/NotificationBell.vue
@@ -214,7 +214,7 @@ onBeforeUnmount(() => {
             <div
                 v-if="show"
                 ref="panel"
-                class="fixed bottom-2 left-[17rem] z-50 flex h-[32rem] w-[22rem] flex-col overflow-hidden rounded-xl border-2 border-foreground bg-card shadow-md"
+                class="fixed inset-x-2 bottom-2 z-50 flex h-[32rem] max-h-[calc(100svh-1rem)] flex-col overflow-hidden rounded-xl border-2 border-foreground bg-card shadow-md sm:inset-x-auto sm:left-[17rem] sm:w-[22rem]"
             >
                 <!-- Header -->
                 <div class="flex items-center justify-between gap-2 border-b-2 border-foreground/10 px-4 py-3">
diff --git a/resources/js/components/posts/editor/PreviewTab.vue b/resources/js/components/posts/editor/PreviewTab.vue
index 11881182..e0650561 100644
--- a/resources/js/components/posts/editor/PreviewTab.vue
+++ b/resources/js/components/posts/editor/PreviewTab.vue
@@ -94,7 +94,7 @@ const activeContentType = computed((): string | undefined => {
             </div>
         </div>
 
-        <div class="flex flex-1 items-start justify-center px-4 pb-8 pt-6">
+        <div class="flex flex-1 items-start justify-center overflow-x-hidden px-4 pb-8 pt-6">
             <PhoneMockup v-if="activePlatform">
                 <PlatformPreview
                     :platform="activePlatform.platform"
diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
index 5826f43f..8e3fdafb 100644
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ b/resources/js/layouts/app/AppSidebarLayout.vue
@@ -62,11 +62,14 @@ onBeforeUnmount(() => {
                 "
             >
                 <div
-                    :class="
+                    :class="[
                         fullWidth
                             ? 'flex min-h-0 flex-1 flex-col'
-                            : 'mx-auto w-full max-w-7xl'
-                    "
+                            : 'mx-auto w-full max-w-7xl',
+                        !fullWidth && !$slots['header'] && !$slots['header-actions']
+                            ? 'pt-12 md:pt-0'
+                            : '',
+                    ]"
                 >
                     <slot />
                 </div>
diff --git a/resources/js/pages/automations/Index.vue b/resources/js/pages/automations/Index.vue
index f4731de6..7ed5ed3a 100644
--- a/resources/js/pages/automations/Index.vue
+++ b/resources/js/pages/automations/Index.vue
@@ -63,7 +63,7 @@ const handleCreate = () => {
 
     <AppLayout>
         <div class="flex h-full flex-1 flex-col gap-6 px-6 py-8">
-            <div class="flex items-center justify-between">
+            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                 <PageHeader :title="$t('automations.title')" />
 
                 <Button @click="handleCreate" :disabled="isCreating">

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 08/30] 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">

From ca42a9f0ef0e0621292b0d4cb4eb51bf20990819 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 19:18:00 -0300
Subject: [PATCH 09/30] fix(posts): tighten preview padding to px-2 on mobile
 so the phone mockup fits pixel-perfect

---
 resources/js/components/posts/editor/PreviewTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/posts/editor/PreviewTab.vue b/resources/js/components/posts/editor/PreviewTab.vue
index e0650561..f9c5a625 100644
--- a/resources/js/components/posts/editor/PreviewTab.vue
+++ b/resources/js/components/posts/editor/PreviewTab.vue
@@ -94,7 +94,7 @@ const activeContentType = computed((): string | undefined => {
             </div>
         </div>
 
-        <div class="flex flex-1 items-start justify-center overflow-x-hidden px-4 pb-8 pt-6">
+        <div class="flex flex-1 items-start justify-center overflow-x-hidden px-2 pb-8 pt-6 sm:px-4">
             <PhoneMockup v-if="activePlatform">
                 <PlatformPreview
                     :platform="activePlatform.platform"

From e31116c4b79513d5fb4df43d43488621b0f7bb89 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 19:24:55 -0300
Subject: [PATCH 10/30] fix(posts): scale the preview phone mockup down on
 mobile for side padding

The 380px mockup frame is wider than a phone viewport, so it sat edge-to-edge. Scale it to 90% below lg (origin top-center keeps it centered) so there's clean symmetric padding to the screen edges. Reverts the now-redundant px-2 container tweak back to px-4.
---
 resources/js/components/PhoneMockup.vue             | 2 +-
 resources/js/components/posts/editor/PreviewTab.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/PhoneMockup.vue b/resources/js/components/PhoneMockup.vue
index 3c662b91..6ba62a83 100644
--- a/resources/js/components/PhoneMockup.vue
+++ b/resources/js/components/PhoneMockup.vue
@@ -9,7 +9,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <div class="relative mx-auto select-none origin-top">
+    <div class="relative mx-auto origin-top scale-90 select-none lg:scale-100">
         <!-- Phone Frame - iPhone 14 Pro style -->
         <div class="relative bg-[#1a1a1a] rounded-[44px] p-[10px] ring-1 ring-white/10">
             <!-- Inner frame -->
diff --git a/resources/js/components/posts/editor/PreviewTab.vue b/resources/js/components/posts/editor/PreviewTab.vue
index f9c5a625..e0650561 100644
--- a/resources/js/components/posts/editor/PreviewTab.vue
+++ b/resources/js/components/posts/editor/PreviewTab.vue
@@ -94,7 +94,7 @@ const activeContentType = computed((): string | undefined => {
             </div>
         </div>
 
-        <div class="flex flex-1 items-start justify-center overflow-x-hidden px-2 pb-8 pt-6 sm:px-4">
+        <div class="flex flex-1 items-start justify-center overflow-x-hidden px-4 pb-8 pt-6">
             <PhoneMockup v-if="activePlatform">
                 <PlatformPreview
                     :platform="activePlatform.platform"

From 3d33d0d380d58d1db7b64695fdd68c81ad1a7d5a Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 19:27:09 -0300
Subject: [PATCH 11/30] fix(posts): enlarge the platform logo badge in the
 preview switcher on mobile

---
 resources/js/components/posts/editor/PreviewTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/posts/editor/PreviewTab.vue b/resources/js/components/posts/editor/PreviewTab.vue
index e0650561..4f3aeb92 100644
--- a/resources/js/components/posts/editor/PreviewTab.vue
+++ b/resources/js/components/posts/editor/PreviewTab.vue
@@ -74,7 +74,7 @@ const activeContentType = computed((): string | undefined => {
                                     class="size-9 shrink-0 rounded-full border-2"
                                     :class="activeId === pp.id ? 'border-foreground shadow-2xs' : 'border-foreground/20'"
                                 />
-                                <span class="absolute -bottom-1 -right-1 inline-flex size-4 items-center justify-center overflow-hidden rounded-full border-2 border-foreground bg-card shadow-2xs">
+                                <span class="absolute -bottom-1 -right-1 inline-flex size-5 items-center justify-center overflow-hidden rounded-full border-2 border-foreground bg-card shadow-2xs lg:size-4">
                                     <img
                                         :src="getPlatformLogo(pp.platform)"
                                         :alt="pp.platform"

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 12/30] 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">

From f9a1731073101fcb7d458d3a021870e618de60ef Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 20:00:13 -0300
Subject: [PATCH 13/30] fix(auth): stop AuthSplitLayout overflowing on mobile
 with wide content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The mobile grid column was implicit (auto), so it sized to content — a long
workspace name (truncate = nowrap, wide intrinsic size) stretched the form
column to its max-w-lg (512px) and overflowed a 375px viewport by ~31px on the
workspaces list. Make the column an explicit minmax(0,1fr) track and give the
grid item min-w-0 so it stays within the viewport and the name truncates.

Found by a runtime horizontal-overflow check; adds MobileOverflowTest guarding
it across the layout variants (AuthLayout, default, full-width editor, detail).
---
 resources/js/layouts/auth/AuthSplitLayout.vue |  4 +-
 tests/Browser/MobileOverflowTest.php          | 79 +++++++++++++++++++
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 tests/Browser/MobileOverflowTest.php

diff --git a/resources/js/layouts/auth/AuthSplitLayout.vue b/resources/js/layouts/auth/AuthSplitLayout.vue
index 3a362bf1..1450ca41 100644
--- a/resources/js/layouts/auth/AuthSplitLayout.vue
+++ b/resources/js/layouts/auth/AuthSplitLayout.vue
@@ -85,8 +85,8 @@ const platforms = [
 </script>
 
 <template>
-    <div class="grid min-h-svh lg:grid-cols-2">
-        <div class="flex flex-col gap-4 p-6 md:p-10">
+    <div class="grid min-h-svh grid-cols-1 lg:grid-cols-2">
+        <div class="flex min-w-0 flex-col gap-4 p-6 md:p-10">
             <div class="flex items-start">
                 <img
                     src="/images/trypost/logo-light.png"
diff --git a/tests/Browser/MobileOverflowTest.php b/tests/Browser/MobileOverflowTest.php
new file mode 100644
index 00000000..61c95a5a
--- /dev/null
+++ b/tests/Browser/MobileOverflowTest.php
@@ -0,0 +1,79 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Enums\UserWorkspace\Role;
+use App\Models\Automation;
+use App\Models\Post;
+use App\Models\PostPlatform;
+use App\Models\User;
+use App\Models\Workspace;
+
+/**
+ * Guards against horizontal overflow on mobile across the layout variants
+ * (AuthLayout, default AppLayout, full-width editor, automations detail).
+ * Reproduces the AuthSplitLayout long-name overflow that a fixed grid column
+ * caused. Returns the widest offending element on failure for quick triage.
+ */
+function assertNoHorizontalOverflow(mixed $page, string $label): void
+{
+    $result = $page->script(<<<'JS'
+        (async () => {
+            for (let i = 0; i < 80; i++) {
+                if (document.querySelector('h1, h2, main, [data-sidebar="trigger"]')) break;
+                await new Promise((r) => setTimeout(r, 50));
+            }
+            await new Promise((r) => setTimeout(r, 400));
+            const vw = window.innerWidth;
+            let worst = null;
+            document.querySelectorAll('*').forEach((el) => {
+                const r = el.getBoundingClientRect();
+                if (r.right > vw + 2 && (!worst || r.right > worst.right)) {
+                    worst = { right: Math.round(r.right), tag: el.tagName.toLowerCase(), cls: (el.getAttribute('class') || '').slice(0, 80) };
+                }
+            });
+            return { sw: document.documentElement.scrollWidth, iw: vw, worst };
+        })()
+    JS);
+
+    $sw = (int) ($result['sw'] ?? 0);
+    $iw = (int) ($result['iw'] ?? 375);
+    $worst = $result['worst'] ?? null;
+    $detail = $worst ? " widest: <{$worst['tag']} class=\"{$worst['cls']}\"> right={$worst['right']}" : '';
+
+    expect($sw - $iw)->toBeLessThanOrEqual(2, "{$label} overflows: scrollWidth {$sw} > innerWidth {$iw}.{$detail}");
+}
+
+test('key pages do not overflow horizontally on a phone', function () {
+    $user = User::factory()->create();
+    $workspace = Workspace::factory()->create([
+        'user_id' => $user->id,
+        // A long name previously stretched the AuthSplitLayout grid column past the viewport.
+        'name' => 'A Really Very Extremely Long Workspace Name That Should Truncate Instead Of Overflowing',
+    ]);
+    $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
+    $user->update(['current_workspace_id' => $workspace->id]);
+
+    $post = Post::factory()->create([
+        'workspace_id' => $workspace->id,
+        'user_id' => $user->id,
+        'content' => 'Launching our new mobile editor today!',
+    ]);
+    PostPlatform::factory()->count(2)->create(['post_id' => $post->id]);
+    $automation = Automation::factory()->create(['workspace_id' => $workspace->id]);
+
+    $this->actingAs($user);
+
+    $pages = [
+        'workspaces (AuthLayout)' => route('app.workspaces.index'),
+        'posts index (default)' => route('app.posts.index'),
+        'post editor (full-width)' => route('app.posts.edit', $post),
+        'calendar (full-width)' => route('app.calendar'),
+        'settings (tabs)' => route('app.api-keys.index'),
+        'automation metrics (detail)' => route('app.automations.metrics', $automation),
+    ];
+
+    foreach ($pages as $label => $url) {
+        assertNoHorizontalOverflow(visit($url)->resize(375, 812), $label);
+    }
+});

From d3738a2ec1ef617fdf3affd0a79ab4a4f3b70f84 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 20:58:53 -0300
Subject: [PATCH 14/30] fix(ui): stop the scrollable tabs list from clipping
 button borders

overflow-x-auto forces overflow-y to auto too, so the tab triggers' border and
shadow were clipped at the list edges (visible on the editor Preview/Channels/
Comments tabs). Drop the fixed h-10 and pad the list (p-1) so the scroll
container has room around the buttons on all sides.
---
 resources/js/components/ui/tabs/TabsList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/tabs/TabsList.vue b/resources/js/components/ui/tabs/TabsList.vue
index 02855184..e825f065 100644
--- a/resources/js/components/ui/tabs/TabsList.vue
+++ b/resources/js/components/ui/tabs/TabsList.vue
@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, "class")
     data-slot="tabs-list"
     v-bind="delegatedProps"
     :class="cn(
-      'inline-flex h-10 w-fit max-w-full items-center gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+      'inline-flex w-fit max-w-full items-center gap-2 overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
       props.class,
     )"
   >

From fe721d490b8161a4c9a3202956de7f2cc0d89b8f Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 21:16:43 -0300
Subject: [PATCH 15/30] refactor(posts): render PostEditorActions once in the
 editor header

The scheduled and editable states each rendered their own copy; the actions
component already decides internally what to show, so it only needs one instance
pushed right with ml-auto.
---
 .../posts/editor/PostEditorHeader.vue         | 96 ++++++++-----------
 1 file changed, 40 insertions(+), 56 deletions(-)

diff --git a/resources/js/components/posts/editor/PostEditorHeader.vue b/resources/js/components/posts/editor/PostEditorHeader.vue
index b507d909..df3835cb 100644
--- a/resources/js/components/posts/editor/PostEditorHeader.vue
+++ b/resources/js/components/posts/editor/PostEditorHeader.vue
@@ -41,14 +41,15 @@ const isPublished = computed(() => PUBLISHED_STATUSES.includes(props.post.status
     <header
         :class="[
             'flex shrink-0 items-center gap-3 border-b-2 border-foreground px-4 py-3 md:px-6',
-            isScheduled ? 'bg-violet-100' : 'justify-between bg-card',
+            isScheduled ? 'bg-violet-100' : 'bg-card',
         ]"
     >
+        <!-- Left: the scheduled banner, or the editable-state status -->
         <template v-if="isScheduled">
             <div class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border-2 border-foreground bg-violet-200">
                 <IconCalendar class="size-4 text-foreground" stroke-width="2" />
             </div>
-            <div class="flex-1 leading-tight">
+            <div class="min-w-0 flex-1 leading-tight">
                 <p class="text-sm font-semibold text-foreground">
                     {{ $t('posts.edit.scheduled_overlay_title') }}
                 </p>
@@ -56,62 +57,45 @@ const isPublished = computed(() => PUBLISHED_STATUSES.includes(props.post.status
                     {{ $t('posts.edit.scheduled_overlay_subtitle', { date: pickTimeLabel }) }}
                 </p>
             </div>
-            <div class="hidden lg:flex">
-                <PostEditorActions
-                    :is-read-only="isReadOnly"
-                    :is-scheduled="isScheduled"
-                    :can-edit="canEdit"
-                    :is-saving="isSaving"
-                    :is-submitting="isSubmitting"
-                    :is-post-action-disabled="isPostActionDisabled"
-                    :post-action-tooltip="postActionTooltip"
-                    :pick-time-label="pickTimeLabel"
-                    v-model:has-picked-time="hasPickedTime"
-                    v-model:scheduled-date-time="scheduledDateTime"
-                    @delete="emit('delete')"
-                    @unschedule="emit('unschedule')"
-                    @submit="emit('submit', $event)"
-                />
-            </div>
         </template>
 
-        <template v-else>
-            <div class="flex items-center gap-3 pl-12 md:pl-0">
-                <span v-if="isSaving" class="flex items-center gap-1.5 text-xs font-semibold text-foreground/70">
-                    <IconLoader2 class="size-3.5 animate-spin" />
-                    {{ $t('posts.edit.saving') }}
-                </span>
-                <span v-else-if="showSaved" class="flex items-center gap-1.5 text-xs font-semibold text-emerald-700">
-                    <IconCircleCheck class="size-3.5" stroke-width="2.5" />
-                    {{ $t('posts.edit.saved') }}
-                </span>
-                <span v-else-if="isPublished" class="flex items-center gap-1.5 text-xs font-semibold text-emerald-700">
-                    <IconCircleCheck class="size-3.5" stroke-width="2.5" />
-                    {{ $t('posts.edit.status.published') }}
-                </span>
-                <span v-else class="flex items-center gap-1.5 text-xs font-semibold text-foreground/60">
-                    <span class="size-2 rounded-full bg-foreground/40" />
-                    {{ $t('posts.edit.draft') }}
-                </span>
-            </div>
+        <div v-else class="flex items-center gap-3 pl-12 md:pl-0">
+            <span v-if="isSaving" class="flex items-center gap-1.5 text-xs font-semibold text-foreground/70">
+                <IconLoader2 class="size-3.5 animate-spin" />
+                {{ $t('posts.edit.saving') }}
+            </span>
+            <span v-else-if="showSaved" class="flex items-center gap-1.5 text-xs font-semibold text-emerald-700">
+                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
+                {{ $t('posts.edit.saved') }}
+            </span>
+            <span v-else-if="isPublished" class="flex items-center gap-1.5 text-xs font-semibold text-emerald-700">
+                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
+                {{ $t('posts.edit.status.published') }}
+            </span>
+            <span v-else class="flex items-center gap-1.5 text-xs font-semibold text-foreground/60">
+                <span class="size-2 rounded-full bg-foreground/40" />
+                {{ $t('posts.edit.draft') }}
+            </span>
+        </div>
 
-            <div class="hidden lg:flex">
-                <PostEditorActions
-                    :is-read-only="isReadOnly"
-                    :is-scheduled="isScheduled"
-                    :can-edit="canEdit"
-                    :is-saving="isSaving"
-                    :is-submitting="isSubmitting"
-                    :is-post-action-disabled="isPostActionDisabled"
-                    :post-action-tooltip="postActionTooltip"
-                    :pick-time-label="pickTimeLabel"
-                    v-model:has-picked-time="hasPickedTime"
-                    v-model:scheduled-date-time="scheduledDateTime"
-                    @delete="emit('delete')"
-                    @unschedule="emit('unschedule')"
-                    @submit="emit('submit', $event)"
-                />
-            </div>
-        </template>
+        <!-- Actions: one instance for both states, pushed right on desktop.
+             On mobile they live in the sticky bottom bar, so this stays hidden. -->
+        <div class="ml-auto hidden lg:flex">
+            <PostEditorActions
+                :is-read-only="isReadOnly"
+                :is-scheduled="isScheduled"
+                :can-edit="canEdit"
+                :is-saving="isSaving"
+                :is-submitting="isSubmitting"
+                :is-post-action-disabled="isPostActionDisabled"
+                :post-action-tooltip="postActionTooltip"
+                :pick-time-label="pickTimeLabel"
+                v-model:has-picked-time="hasPickedTime"
+                v-model:scheduled-date-time="scheduledDateTime"
+                @delete="emit('delete')"
+                @unschedule="emit('unschedule')"
+                @submit="emit('submit', $event)"
+            />
+        </div>
     </header>
 </template>

From 07c2e7cbf35299dbf328b5c8ebe6eb9189b7ceb4 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 21:16:43 -0300
Subject: [PATCH 16/30] fix(posts): tidy the mobile calendar header

- Show/hide the date picker and view switcher with Tailwind (lg:hidden /
  hidden lg:block) instead of the isMobile ref; isMobile now only drives
  effectiveView (which changes navigation behavior, not just visibility)
- Full-width buttons on mobile: prev / Today (fills) / next, and the date
  picker fills the row next to New post
---
 resources/js/pages/posts/Calendar.vue | 33 ++++++++++++++-------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/resources/js/pages/posts/Calendar.vue b/resources/js/pages/posts/Calendar.vue
index 6f717943..4a51b114 100644
--- a/resources/js/pages/posts/Calendar.vue
+++ b/resources/js/pages/posts/Calendar.vue
@@ -52,9 +52,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// Mobile detection — seed from the viewport at setup (available on client render
-// and SPA navigations) so a narrow screen never paints the month grid for a frame.
-const isMobile = ref(typeof window !== 'undefined' ? window.innerWidth < 1024 : false);
+// Mobile detection
+const isMobile = ref(false);
 const { canCreatePost } = useWorkspaceRole();
 
 const createPostUrl = (isoDate: string | null = null) =>
@@ -255,14 +254,14 @@ const formatTime = (scheduledAt: string): string => {
     <AppLayout :fullWidth="true">
         <div class="flex flex-col h-full">
             <header class="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:grid md:grid-cols-[auto_1fr_auto] md:px-6">
-                <div class="flex items-center gap-2 pl-12 md:pl-0">
-                    <Button variant="outline" size="icon" @click="navigate(-1)">
+                <div class="flex w-full items-center gap-2 pl-12 md:w-auto md:pl-0">
+                    <Button variant="outline" size="icon" class="shrink-0" @click="navigate(-1)">
                         <IconChevronLeft class="size-4" />
                     </Button>
-                    <Button variant="outline" @click="goToToday">
+                    <Button variant="outline" class="flex-1 md:flex-none" @click="goToToday">
                         {{ $t('calendar.today') }}
                     </Button>
-                    <Button variant="outline" size="icon" @click="navigate(1)">
+                    <Button variant="outline" size="icon" class="shrink-0" @click="navigate(1)">
                         <IconChevronRight class="size-4" />
                     </Button>
                 </div>
@@ -271,17 +270,19 @@ const formatTime = (scheduledAt: string): string => {
                         {{ headerTitle }}
                     </span>
                 </div>
-                <div class="flex items-center gap-2">
-                    <div v-if="isMobile" class="w-44">
+                <div class="flex w-full items-center gap-2 md:w-auto">
+                    <div class="flex-1 lg:hidden">
                         <DatePicker v-model="selectedDate" :show-time="false" @update:model-value="(v: any) => goToDate(v)" />
                     </div>
-                    <Tabs v-if="!isMobile" :default-value="view" @update:model-value="switchView">
-                        <TabsList>
-                            <TabsTrigger value="day">{{ $t('calendar.day') }}</TabsTrigger>
-                            <TabsTrigger value="week">{{ $t('calendar.week') }}</TabsTrigger>
-                            <TabsTrigger value="month">{{ $t('calendar.month') }}</TabsTrigger>
-                        </TabsList>
-                    </Tabs>
+                    <div class="hidden lg:block">
+                        <Tabs :default-value="view" @update:model-value="switchView">
+                            <TabsList>
+                                <TabsTrigger value="day">{{ $t('calendar.day') }}</TabsTrigger>
+                                <TabsTrigger value="week">{{ $t('calendar.week') }}</TabsTrigger>
+                                <TabsTrigger value="month">{{ $t('calendar.month') }}</TabsTrigger>
+                            </TabsList>
+                        </Tabs>
+                    </div>
 
                     <Link v-if="canCreatePost" :href="createPost.url()">
                         <Button>{{ $t('calendar.new_post') }}</Button>

From 6ead4eee842eafebbfcfd8b8c5c5d486cc52d060 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 21:16:43 -0300
Subject: [PATCH 17/30] fix(analytics): full-width account selector on mobile

Matches the date-range picker below it instead of sitting content-width.
---
 resources/js/components/analytics/AnalyticsAccountSelector.vue | 2 +-
 resources/js/pages/analytics/Index.vue                         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/analytics/AnalyticsAccountSelector.vue b/resources/js/components/analytics/AnalyticsAccountSelector.vue
index 8c59e2c5..ea72b3fa 100644
--- a/resources/js/components/analytics/AnalyticsAccountSelector.vue
+++ b/resources/js/components/analytics/AnalyticsAccountSelector.vue
@@ -48,7 +48,7 @@ const select = (account: AnalyticsAccount) => {
                 role="combobox"
                 :aria-expanded="open"
                 :disabled="accounts.length === 0"
-                class="h-auto min-w-[240px] justify-start gap-3 px-3 py-2 text-left font-medium"
+                class="h-auto w-full justify-start gap-3 px-3 py-2 text-left font-medium sm:w-auto sm:min-w-[240px]"
             >
                 <template v-if="selected">
                     <div class="relative shrink-0">
diff --git a/resources/js/pages/analytics/Index.vue b/resources/js/pages/analytics/Index.vue
index fa058770..712b0025 100644
--- a/resources/js/pages/analytics/Index.vue
+++ b/resources/js/pages/analytics/Index.vue
@@ -58,7 +58,7 @@ const platformSupportsDateRange = computed(() => {
         >
             <div class="flex flex-wrap items-center justify-between gap-3">
                 <PageHeader :title="$t('sidebar.analytics')" />
-                <div class="flex flex-wrap items-center gap-3">
+                <div class="flex w-full flex-wrap items-center gap-3 sm:w-auto">
                     <AnalyticsAccountSelector
                         :accounts="accounts"
                         :selected-id="selectedAccountId"

From 3de62ec2e3d94a28f96a0b91711541fd35adb9b5 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Fri, 17 Jul 2026 21:20:52 -0300
Subject: [PATCH 18/30] fix(posts): stack the posts index toolbar into
 full-width rows on mobile

Search, label filter, and New post each take their own full-width row below sm
(inline on desktop). The label filter trigger goes full-width to match.
---
 resources/js/components/labels/LabelFilter.vue |  2 +-
 resources/js/pages/posts/Index.vue             | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/labels/LabelFilter.vue b/resources/js/components/labels/LabelFilter.vue
index b2b44f79..7291e8de 100644
--- a/resources/js/components/labels/LabelFilter.vue
+++ b/resources/js/components/labels/LabelFilter.vue
@@ -58,7 +58,7 @@ const clear = () => {
                 variant="outline"
                 role="combobox"
                 :aria-expanded="open"
-                class="justify-between gap-2 font-normal"
+                class="w-full justify-between gap-2 font-normal sm:w-auto"
             >
                 <IconTag class="size-4 shrink-0 opacity-60" />
 
diff --git a/resources/js/pages/posts/Index.vue b/resources/js/pages/posts/Index.vue
index 72ca0a72..96b11fbe 100644
--- a/resources/js/pages/posts/Index.vue
+++ b/resources/js/pages/posts/Index.vue
@@ -184,21 +184,21 @@ useWorkspaceEcho(
 
             <!-- Toolbar -->
             <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <div class="flex w-full items-center gap-3 sm:w-auto">
-                    <div class="relative w-full sm:w-auto">
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+                    <div class="relative w-full sm:w-64">
                         <IconSearch class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-foreground/60" />
                         <Input
                             v-model="searchQuery"
                             :placeholder="trans('posts.search')"
-                            class="w-full pl-9 sm:w-64"
+                            class="w-full pl-9"
                         />
                     </div>
 
                     <LabelFilter v-if="labels.length" v-model="selectedLabelIds" :labels="labels" />
                 </div>
 
-                <Link v-if="canCreatePost" :href="createPost.url()">
-                    <Button>{{ $t('posts.new_post') }}</Button>
+                <Link v-if="canCreatePost" :href="createPost.url()" class="w-full sm:w-auto">
+                    <Button class="w-full sm:w-auto">{{ $t('posts.new_post') }}</Button>
                 </Link>
             </div>
 

From 6e0d663fc7889c7ae3fbf9877aaab00ab64f86d6 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 08:33:17 -0300
Subject: [PATCH 19/30] fix(posts): redesign the mobile calendar header

Split the header into a dedicated mobile layout (< lg) and the desktop grid.
Mobile is two clean rows: prev / date picker (fills) / next, then Today +
full-width New post. Fixes the stretched, styleless Today button. Each header
owns its own controls, so the date picker and view switcher no longer need
lg:hidden / hidden lg:block toggles.
---
 resources/js/pages/posts/Calendar.vue | 57 ++++++++++++++++++---------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/resources/js/pages/posts/Calendar.vue b/resources/js/pages/posts/Calendar.vue
index 4a51b114..e58fcfa3 100644
--- a/resources/js/pages/posts/Calendar.vue
+++ b/resources/js/pages/posts/Calendar.vue
@@ -253,36 +253,55 @@ const formatTime = (scheduledAt: string): string => {
 
     <AppLayout :fullWidth="true">
         <div class="flex flex-col h-full">
-            <header class="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:grid md:grid-cols-[auto_1fr_auto] md:px-6">
-                <div class="flex w-full items-center gap-2 pl-12 md:w-auto md:pl-0">
+            <!-- Mobile header: date navigation on top, actions below -->
+            <header class="flex shrink-0 flex-col gap-2 border-b-2 border-foreground bg-card px-4 py-3 lg:hidden">
+                <div class="flex items-center gap-2 pl-12">
                     <Button variant="outline" size="icon" class="shrink-0" @click="navigate(-1)">
                         <IconChevronLeft class="size-4" />
                     </Button>
-                    <Button variant="outline" class="flex-1 md:flex-none" @click="goToToday">
-                        {{ $t('calendar.today') }}
-                    </Button>
+                    <div class="flex-1">
+                        <DatePicker v-model="selectedDate" :show-time="false" @update:model-value="(v: any) => goToDate(v)" />
+                    </div>
                     <Button variant="outline" size="icon" class="shrink-0" @click="navigate(1)">
                         <IconChevronRight class="size-4" />
                     </Button>
                 </div>
-                <div class="hidden items-center justify-center md:flex">
+                <div class="flex items-center gap-2">
+                    <Button variant="outline" class="shrink-0" @click="goToToday">
+                        {{ $t('calendar.today') }}
+                    </Button>
+                    <Link v-if="canCreatePost" :href="createPost.url()" class="flex-1">
+                        <Button class="w-full">{{ $t('calendar.new_post') }}</Button>
+                    </Link>
+                </div>
+            </header>
+
+            <!-- Desktop header: nav · title · view switcher + new post -->
+            <header class="hidden shrink-0 grid-cols-[auto_1fr_auto] items-center gap-3 border-b-2 border-foreground bg-card px-6 py-3 lg:grid">
+                <div class="flex items-center gap-2">
+                    <Button variant="outline" size="icon" @click="navigate(-1)">
+                        <IconChevronLeft class="size-4" />
+                    </Button>
+                    <Button variant="outline" @click="goToToday">
+                        {{ $t('calendar.today') }}
+                    </Button>
+                    <Button variant="outline" size="icon" @click="navigate(1)">
+                        <IconChevronRight class="size-4" />
+                    </Button>
+                </div>
+                <div class="flex items-center justify-center">
                     <span class="truncate text-sm font-bold capitalize text-foreground">
                         {{ headerTitle }}
                     </span>
                 </div>
-                <div class="flex w-full items-center gap-2 md:w-auto">
-                    <div class="flex-1 lg:hidden">
-                        <DatePicker v-model="selectedDate" :show-time="false" @update:model-value="(v: any) => goToDate(v)" />
-                    </div>
-                    <div class="hidden lg:block">
-                        <Tabs :default-value="view" @update:model-value="switchView">
-                            <TabsList>
-                                <TabsTrigger value="day">{{ $t('calendar.day') }}</TabsTrigger>
-                                <TabsTrigger value="week">{{ $t('calendar.week') }}</TabsTrigger>
-                                <TabsTrigger value="month">{{ $t('calendar.month') }}</TabsTrigger>
-                            </TabsList>
-                        </Tabs>
-                    </div>
+                <div class="flex items-center justify-end gap-2">
+                    <Tabs :default-value="view" @update:model-value="switchView">
+                        <TabsList>
+                            <TabsTrigger value="day">{{ $t('calendar.day') }}</TabsTrigger>
+                            <TabsTrigger value="week">{{ $t('calendar.week') }}</TabsTrigger>
+                            <TabsTrigger value="month">{{ $t('calendar.month') }}</TabsTrigger>
+                        </TabsList>
+                    </Tabs>
 
                     <Link v-if="canCreatePost" :href="createPost.url()">
                         <Button>{{ $t('calendar.new_post') }}</Button>

From 0716ea0bd5feeba830a0fe7208d2b2438563bbfe Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 08:38:09 -0300
Subject: [PATCH 20/30] =?UTF-8?q?fix(posts):=20mobile=20calendar=20header?=
 =?UTF-8?q?=20=E2=80=94=20nav=20+=20compact=20date=20on=20row=201,=20full-?=
 =?UTF-8?q?width=20New=20post=20below?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move Today up with prev/next, keep the date picker compact on the right instead
of full-width, and give New post its own full-width row.
---
 resources/js/pages/posts/Calendar.vue | 34 +++++++++++++--------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/resources/js/pages/posts/Calendar.vue b/resources/js/pages/posts/Calendar.vue
index e58fcfa3..218b201e 100644
--- a/resources/js/pages/posts/Calendar.vue
+++ b/resources/js/pages/posts/Calendar.vue
@@ -253,27 +253,27 @@ const formatTime = (scheduledAt: string): string => {
 
     <AppLayout :fullWidth="true">
         <div class="flex flex-col h-full">
-            <!-- Mobile header: date navigation on top, actions below -->
+            <!-- Mobile header: nav + date jump on top, full-width New post below -->
             <header class="flex shrink-0 flex-col gap-2 border-b-2 border-foreground bg-card px-4 py-3 lg:hidden">
-                <div class="flex items-center gap-2 pl-12">
-                    <Button variant="outline" size="icon" class="shrink-0" @click="navigate(-1)">
-                        <IconChevronLeft class="size-4" />
-                    </Button>
-                    <div class="flex-1">
+                <div class="flex items-center justify-between gap-2 pl-12">
+                    <div class="flex items-center gap-2">
+                        <Button variant="outline" size="icon" class="shrink-0" @click="navigate(-1)">
+                            <IconChevronLeft class="size-4" />
+                        </Button>
+                        <Button variant="outline" @click="goToToday">
+                            {{ $t('calendar.today') }}
+                        </Button>
+                        <Button variant="outline" size="icon" class="shrink-0" @click="navigate(1)">
+                            <IconChevronRight class="size-4" />
+                        </Button>
+                    </div>
+                    <div class="w-36 shrink-0">
                         <DatePicker v-model="selectedDate" :show-time="false" @update:model-value="(v: any) => goToDate(v)" />
                     </div>
-                    <Button variant="outline" size="icon" class="shrink-0" @click="navigate(1)">
-                        <IconChevronRight class="size-4" />
-                    </Button>
-                </div>
-                <div class="flex items-center gap-2">
-                    <Button variant="outline" class="shrink-0" @click="goToToday">
-                        {{ $t('calendar.today') }}
-                    </Button>
-                    <Link v-if="canCreatePost" :href="createPost.url()" class="flex-1">
-                        <Button class="w-full">{{ $t('calendar.new_post') }}</Button>
-                    </Link>
                 </div>
+                <Link v-if="canCreatePost" :href="createPost.url()" class="block">
+                    <Button class="w-full">{{ $t('calendar.new_post') }}</Button>
+                </Link>
             </header>
 
             <!-- Desktop header: nav · title · view switcher + new post -->

From 13e5bdb761672046111d39b8dc0048c8e7fd1d4e Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 08:55:49 -0300
Subject: [PATCH 21/30] fix(ui): match the mobile sidebar trigger to the icon
 button size

The floating hamburger was size-9 (36px) next to size-10 (40px) icon buttons, so
it read as too small. Bump it to size-10 to match.
---
 resources/js/layouts/app/AppSidebarLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
index 8e3fdafb..201b49d9 100644
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ b/resources/js/layouts/app/AppSidebarLayout.vue
@@ -52,7 +52,7 @@ onBeforeUnmount(() => {
             </AppHeader>
             <SidebarTrigger
                 v-else
-                class="absolute left-2 top-2 z-30 size-9 rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs md:hidden"
+                class="absolute left-2 top-2 z-30 size-10 rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs md:hidden"
             />
             <div
                 :class="

From fd557fe55959616ab8b822a590dcc2e3edf29617 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 08:59:55 -0300
Subject: [PATCH 22/30] fix(ui): align the mobile sidebar trigger with the
 header buttons

Move the floating hamburger from left-2/top-2 to left-4/top-3 so it lines up
with the header's content padding (and the calendar's nav buttons); bump the
non-header page top reserve to pt-14 to clear the taller trigger.
---
 resources/js/layouts/app/AppSidebarLayout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
index 201b49d9..f0ac4b82 100644
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ b/resources/js/layouts/app/AppSidebarLayout.vue
@@ -52,7 +52,7 @@ onBeforeUnmount(() => {
             </AppHeader>
             <SidebarTrigger
                 v-else
-                class="absolute left-2 top-2 z-30 size-10 rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs md:hidden"
+                class="absolute left-4 top-3 z-30 size-10 rounded-md border-2 border-foreground bg-card text-foreground shadow-2xs md:hidden"
             />
             <div
                 :class="
@@ -67,7 +67,7 @@ onBeforeUnmount(() => {
                             ? 'flex min-h-0 flex-1 flex-col'
                             : 'mx-auto w-full max-w-7xl',
                         !fullWidth && !$slots['header'] && !$slots['header-actions']
-                            ? 'pt-12 md:pt-0'
+                            ? 'pt-14 md:pt-0'
                             : '',
                     ]"
                 >

From b7351667e212ce65f2959937313c8ccfde873e12 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 09:06:56 -0300
Subject: [PATCH 23/30] fix(posts): tidy the post-view header on mobile

Stack it into a clean back-button row and a date + status row (date left, badge
right) instead of cramming everything into one line where the date wrapped and
the badge floated.
---
 resources/js/pages/posts/Show.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/pages/posts/Show.vue b/resources/js/pages/posts/Show.vue
index 103d0725..ef80209f 100644
--- a/resources/js/pages/posts/Show.vue
+++ b/resources/js/pages/posts/Show.vue
@@ -122,8 +122,8 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
         </div>
 
         <div v-else class="flex flex-col flex-1 min-h-0">
-            <header class="flex shrink-0 items-center justify-between gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:px-6">
-                <div class="flex items-center gap-2 pl-12 md:pl-0">
+            <header class="flex shrink-0 flex-col gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:flex-row md:items-center md:justify-between md:px-6">
+                <div class="pl-12 md:pl-0">
                     <Link :href="postsIndex.url()">
                         <Button variant="outline">
                             <IconArrowLeft class="size-4" />
@@ -131,9 +131,9 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
                         </Button>
                     </Link>
                 </div>
-                <div class="flex flex-wrap items-center justify-end gap-3">
-                    <span class="flex items-center gap-1.5 text-sm font-medium text-foreground/70">
-                        <IconCalendar class="size-4 text-foreground/60" />
+                <div class="flex items-start justify-between gap-3 md:items-center md:justify-end">
+                    <span class="flex items-start gap-1.5 text-sm font-medium text-foreground/70">
+                        <IconCalendar class="mt-0.5 size-4 shrink-0 text-foreground/60" />
                         <span v-if="post.published_at">
                             {{ $t('posts.show.published_on', { date: formatDateTime(post.published_at) }) }}
                         </span>
@@ -142,7 +142,7 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
                         </span>
                         <span v-else>{{ $t('posts.show.draft') }}</span>
                     </span>
-                    <Badge :variant="postStatus.variant">
+                    <Badge :variant="postStatus.variant" class="shrink-0">
                         <component :is="postStatus.icon" class="size-3" />
                         {{ postStatus.label }}
                     </Badge>

From da5066e43ebaea02c6b3bc6d69d59cd7f7c292ec Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 09:20:51 -0300
Subject: [PATCH 24/30] fix(posts): merge the editor status into the mobile
 switcher bar

On mobile the header was a whole bar showing only the Draft/Saving/Saved status.
Move that status into the switcher bar (right side) and hide the header on mobile
(the scheduled banner still shows), reclaiming a row. The switcher clears the
floating hamburger when it's the top bar.
---
 .../posts/editor/PostEditorMobileNav.vue      | 67 +++++++++++++++----
 resources/js/pages/posts/Edit.vue             | 38 +++++++----
 2 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/posts/editor/PostEditorMobileNav.vue b/resources/js/components/posts/editor/PostEditorMobileNav.vue
index 2ed5df43..e4469647 100644
--- a/resources/js/components/posts/editor/PostEditorMobileNav.vue
+++ b/resources/js/components/posts/editor/PostEditorMobileNav.vue
@@ -1,6 +1,17 @@
 <script setup lang="ts">
+import { IconCircleCheck, IconLoader2 } from '@tabler/icons-vue';
+import { computed } from 'vue';
+
+import { PostStatus } from '@/types/post';
+
 type MobileView = 'compose' | 'channels' | 'preview' | 'comments';
 
+const props = defineProps<{
+    isSaving: boolean;
+    showSaved: boolean;
+    status: string;
+}>();
+
 const activeView = defineModel<MobileView>('activeView', { required: true });
 
 const items: { key: MobileView; label: string }[] = [
@@ -9,25 +20,55 @@ const items: { key: MobileView; label: string }[] = [
     { key: 'preview', label: 'posts.edit.tabs.preview' },
     { key: 'comments', label: 'posts.edit.tabs.comments' },
 ];
+
+const PUBLISHED_STATUSES: readonly string[] = [PostStatus.Published, PostStatus.PartiallyPublished];
+const isPublished = computed(() => PUBLISHED_STATUSES.includes(props.status));
+// When not scheduled the header is hidden on mobile, so this nav is the top bar:
+// it shows the status chip and must clear the floating hamburger.
+const headerHidden = computed(() => props.status !== PostStatus.Scheduled);
 </script>
 
 <template>
     <div
         data-testid="editor-mobile-nav"
-        class="flex shrink-0 gap-1 overflow-x-auto border-b-2 border-foreground bg-card px-2 py-2 lg:hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        class="flex shrink-0 items-center gap-2 border-b-2 border-foreground bg-card px-2 py-2 lg:hidden"
     >
-        <button
-            v-for="item in items"
-            :key="item.key"
-            type="button"
-            :data-testid="`editor-nav-${item.key}`"
-            class="shrink-0 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-colors"
-            :class="activeView === item.key
-                ? 'border-foreground bg-violet-100 text-foreground'
-                : 'border-transparent text-foreground/60 hover:text-foreground'"
-            @click="activeView = item.key"
+        <div
+            class="flex flex-1 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            :class="{ 'pl-14': headerHidden }"
         >
-            {{ $t(item.label) }}
-        </button>
+            <button
+                v-for="item in items"
+                :key="item.key"
+                type="button"
+                :data-testid="`editor-nav-${item.key}`"
+                class="shrink-0 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-colors"
+                :class="activeView === item.key
+                    ? 'border-foreground bg-violet-100 text-foreground'
+                    : 'border-transparent text-foreground/60 hover:text-foreground'"
+                @click="activeView = item.key"
+            >
+                {{ $t(item.label) }}
+            </button>
+        </div>
+
+        <div v-if="headerHidden" class="shrink-0 pr-1">
+            <span v-if="isSaving" class="flex items-center gap-1 text-xs font-semibold text-foreground/70">
+                <IconLoader2 class="size-3.5 animate-spin" />
+                {{ $t('posts.edit.saving') }}
+            </span>
+            <span v-else-if="showSaved" class="flex items-center gap-1 text-xs font-semibold text-emerald-700">
+                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
+                {{ $t('posts.edit.saved') }}
+            </span>
+            <span v-else-if="isPublished" class="flex items-center gap-1 text-xs font-semibold text-emerald-700">
+                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
+                {{ $t('posts.edit.status.published') }}
+            </span>
+            <span v-else class="flex items-center gap-1.5 text-xs font-semibold text-foreground/60">
+                <span class="size-2 rounded-full bg-foreground/40" />
+                {{ $t('posts.edit.draft') }}
+            </span>
+        </div>
     </div>
 </template>
diff --git a/resources/js/pages/posts/Edit.vue b/resources/js/pages/posts/Edit.vue
index fdd2b06f..03c211bc 100644
--- a/resources/js/pages/posts/Edit.vue
+++ b/resources/js/pages/posts/Edit.vue
@@ -376,24 +376,34 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
 
     <AppLayout :full-width="true">
         <div class="flex flex-col flex-1 min-h-0">
-            <PostEditorHeader
-                :post="post"
-                :can-edit="canCreatePost"
+            <!-- On mobile the status moves into the switcher and the actions into the
+                 bottom bar, so the header is desktop-only — except the scheduled banner,
+                 which stays as the locked-state explanation. -->
+            <div :class="isScheduled ? 'shrink-0' : 'hidden shrink-0 lg:block'">
+                <PostEditorHeader
+                    :post="post"
+                    :can-edit="canCreatePost"
+                    :is-saving="isSaving"
+                    :show-saved="showSaved"
+                    :is-submitting="isSubmitting"
+                    :is-post-action-disabled="isPostActionDisabled"
+                    :post-action-tooltip="postActionTooltip"
+                    :pick-time-label="pickTimeLabel"
+                    v-model:has-picked-time="hasPickedTime"
+                    v-model:scheduled-date-time="scheduledDateTime"
+                    @delete="deletePost"
+                    @unschedule="unschedulePost"
+                    @submit="submit"
+                />
+            </div>
+
+            <PostEditorMobileNav
+                v-model:active-view="mobileView"
                 :is-saving="isSaving"
                 :show-saved="showSaved"
-                :is-submitting="isSubmitting"
-                :is-post-action-disabled="isPostActionDisabled"
-                :post-action-tooltip="postActionTooltip"
-                :pick-time-label="pickTimeLabel"
-                v-model:has-picked-time="hasPickedTime"
-                v-model:scheduled-date-time="scheduledDateTime"
-                @delete="deletePost"
-                @unschedule="unschedulePost"
-                @submit="submit"
+                :status="post.status"
             />
 
-            <PostEditorMobileNav v-model:active-view="mobileView" />
-
             <div class="relative flex-1 overflow-hidden">
                 <div
                     v-if="isPublishing"

From 119edef5b9cda2f30d3ea62bc072a53f9a049e18 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 09:28:07 -0300
Subject: [PATCH 25/30] =?UTF-8?q?fix(posts):=20mobile=20editor=20=E2=80=94?=
 =?UTF-8?q?=20taller=20switcher=20tabs=20and=20a=20wider=20Post=20now=20bu?=
 =?UTF-8?q?tton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match the switcher tab height to the sidebar trigger (h-10), and let the primary
publish button fill the footer (flex-1) on mobile while staying auto-width on desktop.
---
 resources/js/components/posts/editor/PostEditorActions.vue | 7 ++++---
 .../js/components/posts/editor/PostEditorMobileNav.vue     | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/posts/editor/PostEditorActions.vue b/resources/js/components/posts/editor/PostEditorActions.vue
index c422833e..9c3abafc 100644
--- a/resources/js/components/posts/editor/PostEditorActions.vue
+++ b/resources/js/components/posts/editor/PostEditorActions.vue
@@ -50,8 +50,8 @@ const scheduledAtError = computed(() => errors.value.scheduled_at);
         {{ $t('posts.edit.unschedule_cta') }}
     </Button>
 
-    <div v-else-if="!isReadOnly && canEdit" class="flex flex-col items-end gap-1">
-        <div class="flex items-center gap-2">
+    <div v-else-if="!isReadOnly && canEdit" class="flex w-full flex-col gap-1 lg:w-auto lg:items-end">
+        <div class="flex w-full items-center gap-2 lg:w-auto">
             <TooltipProvider>
                 <Tooltip>
                     <TooltipTrigger as-child>
@@ -95,9 +95,10 @@ const scheduledAtError = computed(() => errors.value.scheduled_at);
 
                 <Tooltip>
                     <TooltipTrigger as-child>
-                        <span tabindex="0">
+                        <span tabindex="0" class="flex-1 lg:flex-none">
                             <Button
                                 type="button"
+                                class="w-full lg:w-auto"
                                 :disabled="isPostActionDisabled"
                                 @click="emit('submit', hasPickedTime ? PostStatus.Scheduled : PostStatus.Publishing)"
                             >
diff --git a/resources/js/components/posts/editor/PostEditorMobileNav.vue b/resources/js/components/posts/editor/PostEditorMobileNav.vue
index e4469647..2ac6c8fb 100644
--- a/resources/js/components/posts/editor/PostEditorMobileNav.vue
+++ b/resources/js/components/posts/editor/PostEditorMobileNav.vue
@@ -42,7 +42,7 @@ const headerHidden = computed(() => props.status !== PostStatus.Scheduled);
                 :key="item.key"
                 type="button"
                 :data-testid="`editor-nav-${item.key}`"
-                class="shrink-0 rounded-lg border-2 px-3 py-1.5 text-sm font-semibold transition-colors"
+                class="inline-flex h-10 shrink-0 items-center rounded-lg border-2 px-3 text-sm font-semibold transition-colors"
                 :class="activeView === item.key
                     ? 'border-foreground bg-violet-100 text-foreground'
                     : 'border-transparent text-foreground/60 hover:text-foreground'"

From 708f1adbd24473507dbc8f8ae731977420a28dd2 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 09:32:23 -0300
Subject: [PATCH 26/30] fix(posts): align the mobile switcher bar with the
 sidebar trigger

Use py-3 so the tabs sit at the same vertical position as the top-3 hamburger,
and rounded-md so the tab corners match the trigger.
---
 resources/js/components/posts/editor/PostEditorMobileNav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/posts/editor/PostEditorMobileNav.vue b/resources/js/components/posts/editor/PostEditorMobileNav.vue
index 2ac6c8fb..37414b7a 100644
--- a/resources/js/components/posts/editor/PostEditorMobileNav.vue
+++ b/resources/js/components/posts/editor/PostEditorMobileNav.vue
@@ -31,7 +31,7 @@ const headerHidden = computed(() => props.status !== PostStatus.Scheduled);
 <template>
     <div
         data-testid="editor-mobile-nav"
-        class="flex shrink-0 items-center gap-2 border-b-2 border-foreground bg-card px-2 py-2 lg:hidden"
+        class="flex shrink-0 items-center gap-2 border-b-2 border-foreground bg-card px-2 py-3 lg:hidden"
     >
         <div
             class="flex flex-1 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
@@ -42,7 +42,7 @@ const headerHidden = computed(() => props.status !== PostStatus.Scheduled);
                 :key="item.key"
                 type="button"
                 :data-testid="`editor-nav-${item.key}`"
-                class="inline-flex h-10 shrink-0 items-center rounded-lg border-2 px-3 text-sm font-semibold transition-colors"
+                class="inline-flex h-10 shrink-0 items-center rounded-md border-2 px-3 text-sm font-semibold transition-colors"
                 :class="activeView === item.key
                     ? 'border-foreground bg-violet-100 text-foreground'
                     : 'border-transparent text-foreground/60 hover:text-foreground'"

From e94f2cfe96ba9f1ff18911733b41a63b17f43d5a Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 09:35:50 -0300
Subject: [PATCH 27/30] fix(posts): hide the autosave status in the mobile
 switcher

It's only the autosave indicator (Draft/Saving/Saved) and it crowded the tabs.
Drop it from the mobile switcher (the desktop header still shows it) so the tabs
get the full bar.
---
 .../posts/editor/PostEditorMobileNav.vue      | 62 +++++--------------
 resources/js/pages/posts/Edit.vue             |  2 -
 2 files changed, 17 insertions(+), 47 deletions(-)

diff --git a/resources/js/components/posts/editor/PostEditorMobileNav.vue b/resources/js/components/posts/editor/PostEditorMobileNav.vue
index 37414b7a..96b8a29b 100644
--- a/resources/js/components/posts/editor/PostEditorMobileNav.vue
+++ b/resources/js/components/posts/editor/PostEditorMobileNav.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { IconCircleCheck, IconLoader2 } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
 import { PostStatus } from '@/types/post';
@@ -7,8 +6,6 @@ import { PostStatus } from '@/types/post';
 type MobileView = 'compose' | 'channels' | 'preview' | 'comments';
 
 const props = defineProps<{
-    isSaving: boolean;
-    showSaved: boolean;
     status: string;
 }>();
 
@@ -21,54 +18,29 @@ const items: { key: MobileView; label: string }[] = [
     { key: 'comments', label: 'posts.edit.tabs.comments' },
 ];
 
-const PUBLISHED_STATUSES: readonly string[] = [PostStatus.Published, PostStatus.PartiallyPublished];
-const isPublished = computed(() => PUBLISHED_STATUSES.includes(props.status));
-// When not scheduled the header is hidden on mobile, so this nav is the top bar:
-// it shows the status chip and must clear the floating hamburger.
-const headerHidden = computed(() => props.status !== PostStatus.Scheduled);
+// When not scheduled the header is hidden on mobile and this nav is the top bar,
+// so it must clear the floating hamburger.
+const isTopBar = computed(() => props.status !== PostStatus.Scheduled);
 </script>
 
 <template>
     <div
         data-testid="editor-mobile-nav"
-        class="flex shrink-0 items-center gap-2 border-b-2 border-foreground bg-card px-2 py-3 lg:hidden"
+        class="flex shrink-0 gap-1 overflow-x-auto border-b-2 border-foreground bg-card py-3 pr-2 lg:hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        :class="isTopBar ? 'pl-14' : 'pl-2'"
     >
-        <div
-            class="flex flex-1 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-            :class="{ 'pl-14': headerHidden }"
+        <button
+            v-for="item in items"
+            :key="item.key"
+            type="button"
+            :data-testid="`editor-nav-${item.key}`"
+            class="inline-flex h-10 shrink-0 items-center rounded-md border-2 px-3 text-sm font-semibold transition-colors"
+            :class="activeView === item.key
+                ? 'border-foreground bg-violet-100 text-foreground'
+                : 'border-transparent text-foreground/60 hover:text-foreground'"
+            @click="activeView = item.key"
         >
-            <button
-                v-for="item in items"
-                :key="item.key"
-                type="button"
-                :data-testid="`editor-nav-${item.key}`"
-                class="inline-flex h-10 shrink-0 items-center rounded-md border-2 px-3 text-sm font-semibold transition-colors"
-                :class="activeView === item.key
-                    ? 'border-foreground bg-violet-100 text-foreground'
-                    : 'border-transparent text-foreground/60 hover:text-foreground'"
-                @click="activeView = item.key"
-            >
-                {{ $t(item.label) }}
-            </button>
-        </div>
-
-        <div v-if="headerHidden" class="shrink-0 pr-1">
-            <span v-if="isSaving" class="flex items-center gap-1 text-xs font-semibold text-foreground/70">
-                <IconLoader2 class="size-3.5 animate-spin" />
-                {{ $t('posts.edit.saving') }}
-            </span>
-            <span v-else-if="showSaved" class="flex items-center gap-1 text-xs font-semibold text-emerald-700">
-                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
-                {{ $t('posts.edit.saved') }}
-            </span>
-            <span v-else-if="isPublished" class="flex items-center gap-1 text-xs font-semibold text-emerald-700">
-                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
-                {{ $t('posts.edit.status.published') }}
-            </span>
-            <span v-else class="flex items-center gap-1.5 text-xs font-semibold text-foreground/60">
-                <span class="size-2 rounded-full bg-foreground/40" />
-                {{ $t('posts.edit.draft') }}
-            </span>
-        </div>
+            {{ $t(item.label) }}
+        </button>
     </div>
 </template>
diff --git a/resources/js/pages/posts/Edit.vue b/resources/js/pages/posts/Edit.vue
index 03c211bc..2b6e2f3c 100644
--- a/resources/js/pages/posts/Edit.vue
+++ b/resources/js/pages/posts/Edit.vue
@@ -399,8 +399,6 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
 
             <PostEditorMobileNav
                 v-model:active-view="mobileView"
-                :is-saving="isSaving"
-                :show-saved="showSaved"
                 :status="post.status"
             />
 

From 2c52c90b6e4bdc4c1b91c5f92bae6c75420ba258 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 10:58:07 -0300
Subject: [PATCH 28/30] fix(mobile): polish automations, dialogs, workspaces
 and post views

- automations: minimal back-only header on mobile for the workflow builder
  and detail tabs (extracted AutomationMobileBackHeader); open live
  automations on the metrics tab (drafts still open on workflow); full-width
  status filter + refresh on the invocations toolbar; use IconMenu2 for the
  mobile sidebar trigger
- dialogs: stack DialogFooter primary-on-top / cancel-at-bottom on mobile
- workspaces: bring the workspace picker cards into the neo-brutalist design
- posts: left-align the label filter content; wrap the post-view date/status
  header so a long status badge no longer squeezes the date; add hamburger
  clearance to the editor's mobile tab bar
---
 CLAUDE.md                                     |   2 +-
 .../Controllers/App/AutomationController.php  |   7 +-
 .../automations/AutomationHeader.vue          |   5 +-
 .../AutomationMobileBackHeader.vue            |  21 ++++
 .../js/components/labels/LabelFilter.vue      |  36 +++---
 .../posts/editor/PostEditorMobileNav.vue      |   2 +-
 .../js/components/ui/dialog/DialogFooter.vue  |   2 +-
 .../components/ui/sidebar/SidebarTrigger.vue  |   5 +-
 resources/js/pages/automations/Form.vue       |   5 +-
 resources/js/pages/automations/Index.vue      |  10 +-
 .../js/pages/automations/Invocations.vue      | 105 +++++++++---------
 resources/js/pages/posts/Show.vue             |   2 +-
 resources/js/pages/workspaces/Index.vue       |   6 +-
 tests/Browser/MobileAutomationsTest.php       |  21 ++++
 tests/Feature/Automation/DetailTabsTest.php   |  16 ++-
 15 files changed, 163 insertions(+), 82 deletions(-)
 create mode 100644 resources/js/components/automations/AutomationMobileBackHeader.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index a250825a..47f0196f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -231,7 +231,7 @@ ## Frontend (Vue/TypeScript)
 
 ## Dialogs
 
-- In `<DialogFooter>`, put the **primary action button first** in the markup, then secondary/cancel (e.g. Save → Cancel). `DialogFooter` uses `flex-col-reverse` on mobile and `sm:flex-row sm:justify-start` on desktop, so the first child is the leftmost action on larger screens.
+- In `<DialogFooter>`, put the **primary action button first** in the markup, then secondary/cancel (e.g. Save → Cancel). `DialogFooter` uses `flex-col` on mobile (primary on top, cancel at the bottom) and `sm:flex-row sm:justify-start` on desktop, so the first child is the leftmost action on larger screens.
 - Match sibling dialogs in the same feature area before inventing a new footer layout.
 
 ## AI agents (`app/Ai/Agents`)
diff --git a/app/Http/Controllers/App/AutomationController.php b/app/Http/Controllers/App/AutomationController.php
index 474cc140..ee1a9e60 100644
--- a/app/Http/Controllers/App/AutomationController.php
+++ b/app/Http/Controllers/App/AutomationController.php
@@ -15,6 +15,7 @@
 use App\Actions\Automation\Automation\UpdateAutomation;
 use App\Actions\Automation\Run\RetryRunFromNode;
 use App\Actions\Automation\Run\TestAutomation;
+use App\Enums\Automation\Status;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\App\Automations\ActivateAutomationRequest;
 use App\Http\Requests\App\Automations\InspectFeedRequest;
@@ -77,7 +78,11 @@ public function show(Automation $automation): RedirectResponse
     {
         $this->authorize('view', $automation);
 
-        return redirect()->route('app.automations.workflow', $automation->id);
+        // A draft opens on the builder to be set up; a live automation (active
+        // or paused) opens on its metrics, where the user watches it run.
+        $tab = $automation->status === Status::Draft ? 'workflow' : 'metrics';
+
+        return redirect()->route("app.automations.{$tab}", $automation->id);
     }
 
     public function workflow(Automation $automation, GetAutomationEditorData $editorData): Response
diff --git a/resources/js/components/automations/AutomationHeader.vue b/resources/js/components/automations/AutomationHeader.vue
index 4b287a8c..303e36fa 100644
--- a/resources/js/components/automations/AutomationHeader.vue
+++ b/resources/js/components/automations/AutomationHeader.vue
@@ -3,6 +3,7 @@ import { Link } from '@inertiajs/vue3';
 import { IconArrowLeft, IconCircleCheck, IconCircleDot, IconCircleX } from '@tabler/icons-vue';
 import { trans } from 'laravel-vue-i18n';
 
+import AutomationMobileBackHeader from '@/components/automations/AutomationMobileBackHeader.vue';
 import AutomationTabsNav from '@/components/automations/AutomationTabsNav.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -26,7 +27,9 @@ 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 py-2 pl-12 pr-4 md:pl-4">
+        <AutomationMobileBackHeader />
+
+        <header class="hidden items-center justify-between gap-4 border-b-2 border-foreground/10 bg-card px-4 py-2 lg:flex">
             <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/automations/AutomationMobileBackHeader.vue b/resources/js/components/automations/AutomationMobileBackHeader.vue
new file mode 100644
index 00000000..c12c1af4
--- /dev/null
+++ b/resources/js/components/automations/AutomationMobileBackHeader.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { IconArrowLeft } from '@tabler/icons-vue';
+
+import { Button } from '@/components/ui/button';
+import { index as automationsIndex } from '@/routes/app/automations';
+</script>
+
+<template>
+    <header
+        data-testid="automation-mobile-back"
+        class="flex items-center border-b-2 border-foreground/10 bg-card py-3 pl-16 pr-4 md:pl-4 lg:hidden"
+    >
+        <Link :href="automationsIndex.url()" class="block w-full">
+            <Button variant="outline" class="w-full justify-start gap-2">
+                <IconArrowLeft class="size-4" />
+                {{ $t('common.back') }}
+            </Button>
+        </Link>
+    </header>
+</template>
diff --git a/resources/js/components/labels/LabelFilter.vue b/resources/js/components/labels/LabelFilter.vue
index 7291e8de..720c2a2b 100644
--- a/resources/js/components/labels/LabelFilter.vue
+++ b/resources/js/components/labels/LabelFilter.vue
@@ -60,24 +60,26 @@ const clear = () => {
                 :aria-expanded="open"
                 class="w-full justify-between gap-2 font-normal sm:w-auto"
             >
-                <IconTag class="size-4 shrink-0 opacity-60" />
+                <div class="flex min-w-0 items-center gap-2">
+                    <IconTag class="size-4 shrink-0 opacity-60" />
 
-                <template v-if="selectedLabels.length === 0">
-                    <span class="text-foreground/70">{{ trans('posts.filter_by_label') }}</span>
-                </template>
-                <template v-else>
-                    <div class="flex flex-wrap items-center gap-1">
-                        <LabelBadge
-                            v-for="label in selectedLabels.slice(0, 3)"
-                            :key="label.id"
-                            :label="label"
-                        />
-                        <span
-                            v-if="selectedLabels.length > 3"
-                            class="text-xs font-bold text-foreground/60"
-                        >+{{ selectedLabels.length - 3 }}</span>
-                    </div>
-                </template>
+                    <template v-if="selectedLabels.length === 0">
+                        <span class="text-foreground/70">{{ trans('posts.filter_by_label') }}</span>
+                    </template>
+                    <template v-else>
+                        <div class="flex flex-wrap items-center gap-1">
+                            <LabelBadge
+                                v-for="label in selectedLabels.slice(0, 3)"
+                                :key="label.id"
+                                :label="label"
+                            />
+                            <span
+                                v-if="selectedLabels.length > 3"
+                                class="text-xs font-bold text-foreground/60"
+                            >+{{ selectedLabels.length - 3 }}</span>
+                        </div>
+                    </template>
+                </div>
 
                 <TooltipProvider v-if="selectedIds.length" :delay-duration="200">
                     <Tooltip>
diff --git a/resources/js/components/posts/editor/PostEditorMobileNav.vue b/resources/js/components/posts/editor/PostEditorMobileNav.vue
index 96b8a29b..3e4c5a72 100644
--- a/resources/js/components/posts/editor/PostEditorMobileNav.vue
+++ b/resources/js/components/posts/editor/PostEditorMobileNav.vue
@@ -27,7 +27,7 @@ const isTopBar = computed(() => props.status !== PostStatus.Scheduled);
     <div
         data-testid="editor-mobile-nav"
         class="flex shrink-0 gap-1 overflow-x-auto border-b-2 border-foreground bg-card py-3 pr-2 lg:hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-        :class="isTopBar ? 'pl-14' : 'pl-2'"
+        :class="isTopBar ? 'pl-16' : 'pl-2'"
     >
         <button
             v-for="item in items"
diff --git a/resources/js/components/ui/dialog/DialogFooter.vue b/resources/js/components/ui/dialog/DialogFooter.vue
index 2d42c35b..7b9e87db 100644
--- a/resources/js/components/ui/dialog/DialogFooter.vue
+++ b/resources/js/components/ui/dialog/DialogFooter.vue
@@ -8,7 +8,7 @@ const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 <template>
   <div
     data-slot="dialog-footer"
-    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-start', props.class)"
+    :class="cn('flex flex-col gap-2 sm:flex-row sm:justify-start', props.class)"
   >
     <slot />
   </div>
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
index eaacdcf2..8a66d048 100644
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ b/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand } from "@tabler/icons-vue"
+import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpand, IconMenu2 } from "@tabler/icons-vue"
 import { cn } from "@/lib/utils"
 import { Button } from '@/components/ui/button'
 import { useSidebar } from "./utils"
@@ -21,7 +21,8 @@ const { isMobile, state, toggleSidebar } = useSidebar()
     :class="cn('h-9 w-9', props.class)"
     @click="toggleSidebar"
   >
-    <IconLayoutSidebarLeftExpand v-if="isMobile || state === 'collapsed'" />
+    <IconMenu2 v-if="isMobile" />
+    <IconLayoutSidebarLeftExpand v-else-if="state === 'collapsed'" />
     <IconLayoutSidebarLeftCollapse v-else />
     <span class="sr-only">Toggle Sidebar</span>
   </Button>
diff --git a/resources/js/pages/automations/Form.vue b/resources/js/pages/automations/Form.vue
index cc8d5d00..54390b71 100644
--- a/resources/js/pages/automations/Form.vue
+++ b/resources/js/pages/automations/Form.vue
@@ -24,6 +24,7 @@ import '@vue-flow/controls/dist/style.css';
 
 import AutomationConnectionLine from '@/components/automations/AutomationConnectionLine.vue';
 import AutomationHeader from '@/components/automations/AutomationHeader.vue';
+import AutomationMobileBackHeader from '@/components/automations/AutomationMobileBackHeader.vue';
 import ConditionNodeConfig from '@/components/automations/config/ConditionNodeConfig.vue';
 import DelayNodeConfig from '@/components/automations/config/DelayNodeConfig.vue';
 import EndNodeConfig from '@/components/automations/config/EndNodeConfig.vue';
@@ -450,7 +451,9 @@ const defaultEdgeOptions = {
 
     <AppLayout full-width>
         <div class="flex min-h-0 flex-1 flex-col bg-background">
-            <AutomationHeader :automation="automation" current="workflow">
+            <AutomationMobileBackHeader />
+
+            <AutomationHeader :automation="automation" current="workflow" class="hidden lg:block">
                 <template #actions>
                     <TooltipProvider>
                         <Tooltip>
diff --git a/resources/js/pages/automations/Index.vue b/resources/js/pages/automations/Index.vue
index 7ed5ed3a..9b7f2bb8 100644
--- a/resources/js/pages/automations/Index.vue
+++ b/resources/js/pages/automations/Index.vue
@@ -20,6 +20,7 @@ import {
 import dayjs from '@/dayjs';
 import AppLayout from '@/layouts/AppLayout.vue';
 import {
+    metrics as metricsAutomation,
     store as storeAutomation,
     workflow as workflowAutomation,
 } from '@/routes/app/automations';
@@ -56,6 +57,13 @@ const handleCreate = () => {
         onFinish: () => { isCreating.value = false; },
     });
 };
+
+// A draft opens on the builder to be set up; a live automation opens on its
+// metrics, where the user watches it run.
+const openAutomation = (automation: Automation) => {
+    const route = automation.status === 'draft' ? workflowAutomation : metricsAutomation;
+    router.visit(route.url(automation.id));
+};
 </script>
 
 <template>
@@ -101,7 +109,7 @@ const handleCreate = () => {
                                 v-for="automation in automations.data"
                                 :key="automation.id"
                                 class="cursor-pointer"
-                                @click="router.visit(workflowAutomation.url(automation.id))"
+                                @click="openAutomation(automation)"
                             >
                                 <TableCell class="font-medium">{{ automation.name }}</TableCell>
                                 <TableCell>
diff --git a/resources/js/pages/automations/Invocations.vue b/resources/js/pages/automations/Invocations.vue
index d9a0eb8a..c9eb7a5e 100644
--- a/resources/js/pages/automations/Invocations.vue
+++ b/resources/js/pages/automations/Invocations.vue
@@ -169,64 +169,67 @@ const toggleExpand = async (invocation: Invocation) => {
 <template>
     <AutomationDetailLayout :automation="automation" current="invocations">
         <div class="space-y-4 p-4">
-            <div class="flex flex-wrap items-center gap-2">
-                <Select v-model="statusFilter">
-                    <SelectTrigger
-                        dusk="invocations-status-filter"
-                        class="w-44"
-                    >
-                        <SelectValue>{{ statusLabel }}</SelectValue>
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectItem value="all">{{
-                            $t('automations.invocations.filter.all')
-                        }}</SelectItem>
-                        <SelectItem value="completed">{{
-                            $t('automations.status_run.completed')
-                        }}</SelectItem>
-                        <SelectItem value="failed">{{
-                            $t('automations.status_run.failed')
-                        }}</SelectItem>
-                        <SelectItem value="running">{{
-                            $t('automations.status_run.running')
-                        }}</SelectItem>
-                        <SelectItem value="waiting">{{
-                            $t('automations.status_run.waiting')
-                        }}</SelectItem>
-                    </SelectContent>
-                </Select>
+            <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+                <div class="flex items-center gap-2 sm:contents">
+                    <Select v-model="statusFilter">
+                        <SelectTrigger
+                            dusk="invocations-status-filter"
+                            class="w-full sm:w-44"
+                        >
+                            <SelectValue>{{ statusLabel }}</SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="all">{{
+                                $t('automations.invocations.filter.all')
+                            }}</SelectItem>
+                            <SelectItem value="completed">{{
+                                $t('automations.status_run.completed')
+                            }}</SelectItem>
+                            <SelectItem value="failed">{{
+                                $t('automations.status_run.failed')
+                            }}</SelectItem>
+                            <SelectItem value="running">{{
+                                $t('automations.status_run.running')
+                            }}</SelectItem>
+                            <SelectItem value="waiting">{{
+                                $t('automations.status_run.waiting')
+                            }}</SelectItem>
+                        </SelectContent>
+                    </Select>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger as-child>
+                                <Button
+                                    variant="outline"
+                                    size="icon"
+                                    class="shrink-0 sm:order-last"
+                                    :aria-label="
+                                        $t('automations.invocations.refresh')
+                                    "
+                                    :disabled="isRefreshing"
+                                    dusk="invocations-refresh"
+                                    @click="reload"
+                                >
+                                    <IconRefresh
+                                        class="size-4"
+                                        :class="{ 'animate-spin': isRefreshing }"
+                                    />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{{
+                                $t('automations.invocations.refresh')
+                            }}</TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                </div>
                 <Input
                     v-model="search"
                     :placeholder="
                         $t('automations.invocations.search_placeholder')
                     "
-                    class="max-w-xs"
+                    class="sm:max-w-xs"
                     dusk="invocations-search"
                 />
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger as-child>
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                :aria-label="
-                                    $t('automations.invocations.refresh')
-                                "
-                                :disabled="isRefreshing"
-                                dusk="invocations-refresh"
-                                @click="reload"
-                            >
-                                <IconRefresh
-                                    class="size-4"
-                                    :class="{ 'animate-spin': isRefreshing }"
-                                />
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>{{
-                            $t('automations.invocations.refresh')
-                        }}</TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
             </div>
 
             <div class="relative">
diff --git a/resources/js/pages/posts/Show.vue b/resources/js/pages/posts/Show.vue
index ef80209f..c027ad70 100644
--- a/resources/js/pages/posts/Show.vue
+++ b/resources/js/pages/posts/Show.vue
@@ -131,7 +131,7 @@ usePostEcho(props.post.id, '.post.platform.status.updated', () => {
                         </Button>
                     </Link>
                 </div>
-                <div class="flex items-start justify-between gap-3 md:items-center md:justify-end">
+                <div class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 md:flex-nowrap md:justify-end">
                     <span class="flex items-start gap-1.5 text-sm font-medium text-foreground/70">
                         <IconCalendar class="mt-0.5 size-4 shrink-0 text-foreground/60" />
                         <span v-if="post.published_at">
diff --git a/resources/js/pages/workspaces/Index.vue b/resources/js/pages/workspaces/Index.vue
index ff99c72c..38a2b45a 100644
--- a/resources/js/pages/workspaces/Index.vue
+++ b/resources/js/pages/workspaces/Index.vue
@@ -41,14 +41,14 @@ const switchToWorkspace = (workspace: Workspace) => {
             <div
                 v-for="workspace in workspaces"
                 :key="workspace.id"
-                class="flex cursor-pointer items-center gap-3 rounded-lg border p-4 transition-colors hover:bg-accent/50"
-                :class="workspace.id === currentWorkspaceId ? 'border-primary/50 bg-accent/30' : ''"
+                class="flex cursor-pointer items-center gap-3 rounded-xl border-2 border-foreground bg-card p-4 shadow-2xs transition-all hover:-translate-y-0.5 hover:shadow-md"
+                :class="workspace.id === currentWorkspaceId ? 'bg-violet-100' : ''"
                 @click="switchToWorkspace(workspace)"
             >
                 <Avatar
                     :src="workspace.logo_url"
                     :name="workspace.name"
-                    class="size-10 shrink-0 rounded-lg"
+                    class="size-10 shrink-0 rounded-lg border-2 border-foreground"
                     fallback-class="bg-muted text-muted-foreground"
                 />
                 <div class="min-w-0 flex-1">
diff --git a/tests/Browser/MobileAutomationsTest.php b/tests/Browser/MobileAutomationsTest.php
index b286be88..1ecf3f5d 100644
--- a/tests/Browser/MobileAutomationsTest.php
+++ b/tests/Browser/MobileAutomationsTest.php
@@ -31,4 +31,25 @@
     JS);
 
     $page->assertVisible('@automation-mobile-notice');
+
+    // The desktop-only builder header (name, status, guide, save, tabs) is
+    // replaced by a minimal back-only header on a phone — nothing here is
+    // actionable, so only the back button and the floating hamburger remain.
+    $page->assertVisible('@automation-mobile-back');
+});
+
+test('the automation builder shows the full header on desktop, not the minimal one', function () {
+    $user = User::factory()->create();
+    $workspace = Workspace::factory()->create(['user_id' => $user->id]);
+    $workspace->members()->attach($user->id, ['role' => Role::Member->value]);
+    $user->update(['current_workspace_id' => $workspace->id]);
+
+    $automation = Automation::factory()->create(['workspace_id' => $workspace->id]);
+
+    $this->actingAs($user);
+
+    $page = visit(route('app.automations.workflow', $automation))->resize(1280, 900);
+
+    $page->assertMissing('@automation-mobile-back');
+    $page->assertMissing('@automation-mobile-notice');
 });
diff --git a/tests/Feature/Automation/DetailTabsTest.php b/tests/Feature/Automation/DetailTabsTest.php
index 7f5c767b..acd05bdb 100644
--- a/tests/Feature/Automation/DetailTabsTest.php
+++ b/tests/Feature/Automation/DetailTabsTest.php
@@ -17,12 +17,26 @@
     $this->automation = Automation::factory()->for($this->workspace)->create();
 });
 
-it('redirects the bare automation URL to the workflow tab', function () {
+it('redirects a draft automation URL to the workflow tab', function () {
     $this->actingAs($this->user)
         ->get(route('app.automations.show', $this->automation->id))
         ->assertRedirect(route('app.automations.workflow', $this->automation->id));
 });
 
+it('redirects a live automation URL to the metrics tab', function () {
+    $active = Automation::factory()->for($this->workspace)->active()->create();
+
+    $this->actingAs($this->user)
+        ->get(route('app.automations.show', $active->id))
+        ->assertRedirect(route('app.automations.metrics', $active->id));
+
+    $paused = Automation::factory()->for($this->workspace)->paused()->create();
+
+    $this->actingAs($this->user)
+        ->get(route('app.automations.show', $paused->id))
+        ->assertRedirect(route('app.automations.metrics', $paused->id));
+});
+
 it('renders the workflow editor on the workflow tab', function () {
     $this->actingAs($this->user)
         ->get(route('app.automations.workflow', $this->automation->id))

From bc93667fcfd54413999c283a5656c1c47b25589e Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 14:17:18 -0300
Subject: [PATCH 29/30] fix(mobile): clear the hamburger and match its size on
 the scheduled editor banner

The scheduled-post banner in the editor now clears the floating sidebar
trigger on mobile (pl-12 md:pl-0), aligns its calendar icon to the top of
the text, and matches the hamburger's size (size-10 md:size-9). Desktop is
unchanged.
---
 .../posts/editor/PostEditorHeader.vue         | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/posts/editor/PostEditorHeader.vue b/resources/js/components/posts/editor/PostEditorHeader.vue
index df3835cb..1dab023f 100644
--- a/resources/js/components/posts/editor/PostEditorHeader.vue
+++ b/resources/js/components/posts/editor/PostEditorHeader.vue
@@ -44,18 +44,21 @@ const isPublished = computed(() => PUBLISHED_STATUSES.includes(props.post.status
             isScheduled ? 'bg-violet-100' : 'bg-card',
         ]"
     >
-        <!-- Left: the scheduled banner, or the editable-state status -->
+        <!-- Left: the scheduled banner, or the editable-state status.
+             Both clear the floating hamburger on mobile (pl-12 md:pl-0). -->
         <template v-if="isScheduled">
-            <div class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border-2 border-foreground bg-violet-200">
-                <IconCalendar class="size-4 text-foreground" stroke-width="2" />
-            </div>
-            <div class="min-w-0 flex-1 leading-tight">
-                <p class="text-sm font-semibold text-foreground">
-                    {{ $t('posts.edit.scheduled_overlay_title') }}
-                </p>
-                <p class="text-xs text-foreground/70">
-                    {{ $t('posts.edit.scheduled_overlay_subtitle', { date: pickTimeLabel }) }}
-                </p>
+            <div class="flex min-w-0 flex-1 items-start gap-3 pl-12 md:items-center md:pl-0">
+                <div class="inline-flex size-10 shrink-0 items-center justify-center rounded-lg border-2 border-foreground bg-violet-200 md:size-9">
+                    <IconCalendar class="size-4 text-foreground" stroke-width="2" />
+                </div>
+                <div class="min-w-0 flex-1 leading-tight">
+                    <p class="text-sm font-semibold text-foreground">
+                        {{ $t('posts.edit.scheduled_overlay_title') }}
+                    </p>
+                    <p class="text-xs text-foreground/70">
+                        {{ $t('posts.edit.scheduled_overlay_subtitle', { date: pickTimeLabel }) }}
+                    </p>
+                </div>
             </div>
         </template>
 

From f63286efd4b877633fe15acc694687b99dff4b09 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 14:34:15 -0300
Subject: [PATCH 30/30] fix(sidebar): open the workspace menu to the side on
 desktop with a matching icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The workspace switcher now opens to the right on desktop (like the user menu)
and stays below the trigger on mobile, via useSidebar()'s isMobile. The trigger
icon follows the direction: chevron-right on desktop, an up/down selector on
mobile — for both the workspace switcher and the user menu.
---
 resources/js/components/AppSidebar.vue | 10 ++++++++--
 resources/js/components/NavUser.vue    |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 24a33ad4..3f316334 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -17,6 +17,7 @@ import {
     IconPhoto,
     IconPencil,
     IconPlus,
+    IconSelector,
     IconSettings,
     IconTag,
 } from '@tabler/icons-vue';
@@ -45,6 +46,7 @@ import {
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
+    useSidebar,
 } from '@/components/ui/sidebar';
 import { useActiveUrl } from '@/composables/useActiveUrl';
 import { useWorkspaceRole } from '@/composables/useWorkspaceRole';
@@ -70,6 +72,10 @@ const subscriptionPastDue = computed<boolean>(() => Boolean(page.props.auth.subs
 
 const { canCreatePost, canManageAccounts, canManageAutomations, canCreateWorkspace } = useWorkspaceRole();
 
+// Open the workspace menu to the side on desktop (like the user menu) but keep
+// it below the trigger on mobile, where the sidebar is an overlay sheet.
+const { isMobile } = useSidebar();
+
 const mainNavItems = computed<NavItem[]>(() => [
     {
         title: trans('sidebar.posts.calendar'),
@@ -196,11 +202,11 @@ const handleCreateWorkspace = () => {
                                         {{ currentWorkspace?.name ?? $t('sidebar.select_workspace') }}
                                     </span>
                                 </div>
-                                <IconChevronRight class="ml-auto size-4" />
+                                <component :is="isMobile ? IconSelector : IconChevronRight" class="ml-auto size-4" />
                             </SidebarMenuButton>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent class="w-(--reka-dropdown-menu-trigger-width) min-w-56"
-                            align="start" side="bottom" :side-offset="4">
+                            align="start" :side="isMobile ? 'bottom' : 'right'" :side-offset="4">
                             <DropdownMenuLabel>
                                 {{ $t('sidebar.workspaces') }}
                             </DropdownMenuLabel>
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index 349b273a..8253dbf4 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import { IconChevronRight } from '@tabler/icons-vue';
+import { IconChevronRight, IconSelector } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
 import NotificationBell from '@/components/NotificationBell.vue';
@@ -38,7 +38,7 @@ const { isMobile } = useSidebar();
                         data-test="sidebar-menu-button"
                     >
                         <UserInfo :user="user" />
-                        <IconChevronRight class="ml-auto size-4" />
+                        <component :is="isMobile ? IconSelector : IconChevronRight" class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent