feat(ui): add responsive layout support for mobile and small screens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/hooks/use-media-query.ts

@@ -0,0 +1,15 @@
+"use client"
+
+import { useSyncExternalStore } from "react"
+
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    (callback) => {
+      const mql = window.matchMedia(query)
+      mql.addEventListener("change", callback)
+      return () => mql.removeEventListener("change", callback)
+    },
+    () => window.matchMedia(query).matches,
+    () => false
+  )
+}

src/hooks/use-mobile.ts

@@ -0,0 +1,9 @@
+"use client"
+
+import { useMediaQuery } from "./use-media-query"
+
+const MOBILE_BREAKPOINT = "(max-width: 767px)"
+
+export function useIsMobile(): boolean {
+  return useMediaQuery(MOBILE_BREAKPOINT)
+}