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] 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">