From ca0e08787ce0498c2055d50e7ecc285f20bf94e5 Mon Sep 17 00:00:00 2001 From: Matt Van Horn Date: Mon, 18 May 2026 23:46:50 -0700 Subject: [PATCH] fix(slide-out): use shared useIsMobile (768px) instead of ad-hoc 640px media query Fixes #1359 The SidebarSlideOutPanel was checking '(min-width: 640px)' while the rest of the dashboard uses the project-wide useIsMobile() at 768px. At viewports between 640-767px the slide-out rendered the desktop side-attached overlay while the surrounding layout had already collapsed to mobile, leaving the panel positioned against a sidebar that was no longer there. Aligning to the shared hook fixes the layout choice at every viewport size. useIsMobile's 768px threshold is unchanged; only this call site adapts. --- .../components/layout/ui/sidebar/SidebarSlideOutPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx index dbfdf0304..72530eaf0 100644 --- a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx +++ b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx @@ -2,7 +2,7 @@ import { AnimatePresence, motion } from "motion/react"; import { useCallback, useEffect } from "react"; -import { useMediaQuery } from "@/hooks/use-media-query"; +import { useIsMobile } from "@/hooks/use-mobile"; import { SLIDEOUT_PANEL_OPENED_EVENT } from "@/lib/layout-events"; interface SidebarSlideOutPanelProps { @@ -28,7 +28,7 @@ export function SidebarSlideOutPanel({ width = 360, children, }: SidebarSlideOutPanelProps) { - const isMobile = !useMediaQuery("(min-width: 640px)"); + const isMobile = useIsMobile(); useEffect(() => { if (open) {