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).
This commit is contained in:
Matthieu MALVACHE
2026-03-16 21:20:10 +01:00
parent ccd146f3da
commit 52ae100c97
2 changed files with 7 additions and 5 deletions
+4 -3
View File
@@ -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>
+3 -2
View File
@@ -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>