From 52ae100c9702e2c024dc1d950b16c1a358241b67 Mon Sep 17 00:00:00 2001
From: Matthieu MALVACHE <matthieu@ma2t.com>
Date: Mon, 16 Mar 2026 21:20:10 +0100
Subject: [PATCH] fix: show bottom navigation on tablet breakpoint for calendar
 and contacts pages

Consistent with the mail page fix - all three sections now show the
horizontal navigation bar on tablet/landscape viewports (768-1023px).
---
 app/[locale]/calendar/page.tsx | 7 ++++---
 app/[locale]/contacts/page.tsx | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/[locale]/calendar/page.tsx b/app/[locale]/calendar/page.tsx
index 1567ac8..eb11e6a 100644
--- a/app/[locale]/calendar/page.tsx
+++ b/app/[locale]/calendar/page.tsx
@@ -13,7 +13,7 @@ import { useAuthStore } from "@/stores/auth-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useIdentityStore } from "@/stores/identity-store";
 import { toast } from "@/stores/toast-store";
-import { useIsMobile } from "@/hooks/use-media-query";
+import { useIsMobile, useIsTablet } from "@/hooks/use-media-query";
 import { CalendarToolbar } from "@/components/calendar/calendar-toolbar";
 import { CalendarMonthView } from "@/components/calendar/calendar-month-view";
 import { CalendarWeekView } from "@/components/calendar/calendar-week-view";
@@ -42,6 +42,7 @@ export default function CalendarPage() {
   const router = useRouter();
   const t = useTranslations("calendar");
   const isMobile = useIsMobile();
+  const isTablet = useIsTablet();
   const { client, isAuthenticated } = useAuthStore();
   const {
     calendars, events, selectedDate, viewMode, selectedCalendarIds,
@@ -644,8 +645,8 @@ export default function CalendarPage() {
           {renderView()}
         </div>
 
-        {/* Mobile Bottom Navigation */}
-        {isMobile && (
+        {/* Mobile/Tablet Bottom Navigation */}
+        {(isMobile || isTablet) && (
           <NavigationRail orientation="horizontal" />
         )}
       </div>
diff --git a/app/[locale]/contacts/page.tsx b/app/[locale]/contacts/page.tsx
index 356a677..0675ca9 100644
--- a/app/[locale]/contacts/page.tsx
+++ b/app/[locale]/contacts/page.tsx
@@ -20,7 +20,7 @@ import { useAuthStore } from "@/stores/auth-store";
 import { toast } from "@/stores/toast-store";
 import { cn } from "@/lib/utils";
 import { NavigationRail } from "@/components/layout/navigation-rail";
-import { useIsMobile } from "@/hooks/use-media-query";
+import { useIsMobile, useIsTablet } from "@/hooks/use-media-query";
 import type { ContactCard } from "@/lib/jmap/types";
 
 type View =
@@ -74,6 +74,7 @@ export default function ContactsPage() {
   const hasFetched = useRef(false);
   const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
   const isMobile = useIsMobile();
+  const isTablet = useIsTablet();
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -545,7 +546,7 @@ export default function ContactsPage() {
           </div>
         </div>
 
-        {isMobile && (
+        {(isMobile || isTablet) && (
           <NavigationRail orientation="horizontal" />
         )}
       </div>