apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(slide-out): use shared useIsMobile (768px) instead of ad-hoc 640px media query

Browse source 
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.
This commit is contained in:
Matt Van Horn 2026-05-18 23:46:50 -07:00
parent d1d44dc4c5
commit ca0e08787c
No known key found for this signature in database
1 changed files with 2 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
View file

@ -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) {