External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: mobile-responsive settings dialog, homepage, nav, and toast

Browse Source 
- Settings dialog: full-screen on mobile with horizontal pill nav,
  card-based user/team tables, compact audit log, stacked SettingRow
- HomePage: stacked mobile layout with horizontal quick actions,
  tablet-friendly panel widths (w-64 lg:w-80)
- Extract MobileBottomNav component with safe-area-inset padding
- Add MobileBottomNav to fullscreen grid page
- Larger touch targets on hamburger, sidebar close, bottom nav items
- Toast repositioned to top-center on mobile (avoids bottom nav overlap)
- PWA viewport-fit=cover for notch devices
- Fix useMediaQuery null guard for test environment compatibility
This commit is contained in:
SnapOtter
2026-06-05 23:18:55 +08:00
parent 37f8ebcf66
commit d373ac83dc
9 changed files with 455 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/hooks/use-mobile.ts
+2 -1
View File
@@ -9,12 +9,13 @@ const MOBILE_BREAKPOINT = 768;
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => {
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
return window.matchMedia(query).matches;
return window.matchMedia(query)?.matches ?? false;
});
useEffect(() => {
if (typeof window.matchMedia !== "function") return;
const mq = window.matchMedia(query);
if (!mq) return;
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
mq.addEventListener("change", handler);
setMatches(mq.matches);