trypostit · paulocastellano · Jul 18, 2026 · Jul 17, 2026 · Jul 17, 2026 · Jul 17, 2026
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -231,7 +231,7 @@ Vue components must have a single root element.
 
 ## 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
@@ -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/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/ar/posts.php b/lang/ar/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'ألغِ الجدولة للتعديل',
 
         'tabs' => [
+            'compose' => 'الكتابة',
             'preview' => 'معاينة',
             'channels' => 'القنوات',
             'comments' => 'التعليقات',

diff --git 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/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/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/el/posts.php b/lang/el/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Αναίρεση προγραμματισμού για επεξεργασία',
 
         'tabs' => [
+            'compose' => 'Σύνταξη',
             'preview' => 'Προεπισκόπηση',
             'channels' => 'Κανάλια',
             'comments' => 'Σχόλια',

diff --git 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/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/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/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/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/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/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/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/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/ja/posts.php b/lang/ja/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => '予約を解除して編集',
 
         'tabs' => [
+            'compose' => '作成',
             'preview' => 'プレビュー',
             'channels' => 'チャンネル',
             'comments' => 'コメント',

diff --git 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/ko/posts.php b/lang/ko/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => '편집하려면 예약 취소',
 
         'tabs' => [
+            'compose' => '작성',
             'preview' => '미리보기',
             'channels' => '채널',
             'comments' => '댓글',

diff --git 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/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/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/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/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/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/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/ru/posts.php b/lang/ru/posts.php
@@ -363,6 +363,7 @@
         'unschedule_cta' => 'Отменить планирование для редактирования',
 
         'tabs' => [
+            'compose' => 'Написать',
             'preview' => 'Предпросмотр',
             'channels' => 'Каналы',
             'comments' => 'Комментарии',

diff --git 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/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/automations.php b/lang/zh/automations.php
@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 return [
+    'mobile_notice' => '自动化编辑器在更大的屏幕上体验最佳。请在电脑上打开以搭建你的工作流。',
     'title' => '自动化',
     'default_name' => '新建自动化',
 

diff --git 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/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="right" :side-offset="4">
+                            align="start" :side="isMobile ? 'bottom' : 'right'" :side-offset="4">
                             <DropdownMenuLabel>
                                 {{ $t('sidebar.workspaces') }}
                             </DropdownMenuLabel>

diff --git 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/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/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

diff --git 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">
@@ -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/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 }}