Collapse metadata panels into bottom sheets on mobile

DESIGN.md asks for metadata panels to slide up from the bottom under
768px. A BottomSheet component provides the trigger pill and the sheet
(backdrop blur, scroll lock, Escape to close) and ResponsivePanel swaps
between it and the existing desktop <aside>, so panel content is mounted
once either way.

Applied to the Library/Online/Similar detail asides and to long pool
descriptions. Upload needed nothing: its metadata editor is already a
full-screen modal that stacks cleanly on small screens.

frontend/src/lib/useMediaQuery.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+/** Track a CSS media query, e.g. `useMediaQuery("(min-width: 768px)")`. */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
+
+  useEffect(() => {
+    const list = window.matchMedia(query);
+    const update = () => setMatches(list.matches);
+    update();
+    list.addEventListener("change", update);
+    return () => list.removeEventListener("change", update);
+  }, [query]);
+
+  return matches;
+}
+
+/** The design system's mobile breakpoint: metadata panels become bottom sheets. */
+export function useIsMobile(): boolean {
+  return !useMediaQuery("(min-width: 768px)");
+}