ui(sidebar): pin heap, single scroll area, collapsible metadata group

The right sidepanel had three stacked flex regions (heap card +
header + PhotoInfoPanel) with PhotoInfoPanel maintaining its own
internal scroll. That made the editable fields (filename, title,
notes, rating, color, flag) stick at the top — separate from the
readonly metadata that scrolled below. Effectively two scroll
boundaries on one sidebar.

Move the scroll boundary up so only ActiveHeapCard + Header stay
pinned; editable fields and readonly metadata now scroll together.
Wrap the four readonly sections (Tags / Basic Info / Camera /
Location) in a single outer 'Metadata' collapsible so the user can
hide the whole block with one click. Sub-sections inside stay
individually collapsible.

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

frontend/src/components/layout/RightSidebar.tsx

@@ -249,6 +249,9 @@ export function RightSidebar() {
   }
 
   // ── Single-photo: full editor via PhotoInfoPanel ────────────────────
+  // Heap card + header stay pinned at the top; the edit fields and
+  // readonly metadata sections scroll together in a single overflow
+  // region below.
   if (selectedPhotos.length === 1) {
     const id = activePhotoId ?? selectedPhotos[0]
     return (
@@ -259,7 +262,9 @@ export function RightSidebar() {
       >
         <ActiveHeapCard />
         <Header />
-        <PhotoInfoPanel photoId={id} />
+        <div className="flex-1 overflow-y-auto">
+          <PhotoInfoPanel photoId={id} />
+        </div>
       </div>
     )
   }