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/detail/DetailShell.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 
+import { ResponsivePanel } from "@/components/BottomSheet";
+
 export function DetailShell({
   breadcrumb,
   actions,
@@ -17,7 +19,9 @@ export function DetailShell({
     <div className="flex flex-col gap-4">
       {breadcrumb}
       <div className="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
-        <aside className="order-2 flex flex-col gap-4 lg:order-1">{aside}</aside>
+        <div className="order-2 lg:order-1">
+          <ResponsivePanel title="Tags & info">{aside}</ResponsivePanel>
+        </div>
         <div className="order-1 flex min-w-0 flex-col gap-4 lg:order-2">
           {actions}
           {media}