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/similar/SimilarPage.tsx

@@ -8,6 +8,7 @@ import {
 } from "react";
 import { Link } from "react-router-dom";
 
+import { ResponsivePanel } from "@/components/BottomSheet";
 import { Button, Spinner } from "@/components/ui";
 import { api, errorMessage, uploadFile } from "@/lib/api";
 import { cn } from "@/lib/cn";
@@ -182,7 +183,7 @@ export default function SimilarPage() {
 
       {check ? (
         <div className="grid gap-6 lg:grid-cols-[320px_minmax(0,1fr)]">
-          <aside className="flex flex-col gap-4">
+          <ResponsivePanel title="File & check">
             <section className="overflow-hidden rounded-lg border border-ctp-surface0 bg-ctp-base">
               <div className="flex max-h-72 items-center justify-center overflow-hidden bg-ctp-mantle">
                 {check.file_url ? (
@@ -242,7 +243,7 @@ export default function SimilarPage() {
                 </div>
               </div>
             </section>
-          </aside>
+          </ResponsivePanel>
 
           <div className="flex min-w-0 flex-col gap-6">
             <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">