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] 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');
+});