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