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/features/pools/PoolDetailPage.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import { Link, useLocation, useParams } from "react-router-dom";
 
 import { Button, EmptyState, Spinner } from "@/components/ui";
+import { BottomSheet } from "@/components/BottomSheet";
 import { PostCard } from "@/features/online/PostCard";
 import { PoolFollowButton } from "@/features/follows/PoolFollowButton";
 import { api } from "@/lib/api";
@@ -19,6 +20,7 @@ import {
   type E621Post,
 } from "@/lib/e621";
 import { formatDate } from "@/lib/format";
+import { useIsMobile } from "@/lib/useMediaQuery";
 import { useE621 } from "@/store/e621";
 
 const CHUNK = 100;
@@ -48,6 +50,7 @@ export default function PoolDetailPage() {
   const credentials = useE621((state) => state.credentials);
   const blacklist = useE621((state) => state.blacklist);
   const blacklistSet = useMemo(() => new Set(blacklist), [blacklist]);
+  const isMobile = useIsMobile();
 
   const [visibleCount, setVisibleCount] = useState(CHUNK);
   const [showBlacklisted, setShowBlacklisted] = useState(false);
@@ -205,14 +208,22 @@ export default function PoolDetailPage() {
       </header>
 
       {pool.description.trim() ? (
-        <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
-          <h2 className="text-sm font-semibold text-ctp-subtext1">
-            Description
-          </h2>
-          <div className="mt-2 text-sm leading-relaxed text-ctp-subtext0">
-            {renderDText(pool.description)}
-          </div>
-        </section>
+        isMobile ? (
+          <BottomSheet title="Description">
+            <div className="text-sm leading-relaxed text-ctp-subtext0">
+              {renderDText(pool.description)}
+            </div>
+          </BottomSheet>
+        ) : (
+          <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
+            <h2 className="text-sm font-semibold text-ctp-subtext1">
+              Description
+            </h2>
+            <div className="mt-2 text-sm leading-relaxed text-ctp-subtext0">
+              {renderDText(pool.description)}
+            </div>
+          </section>
+        )
       ) : null}
 
       <section className="flex flex-col gap-3">