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

@@ -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'"

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

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"

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>

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