Click preview compact mode: toolbar below, fixed size, Battles fit too

- Toolbar (pane toggle + close) moves below the pane for thumb reach.
- The compact modal gets a fixed box sized to its largest pane, with each
  pane anchored just above the toolbar, so switching to the (shorter)
  info tile no longer moves the buttons. A too-tall info tile scrolls
  within itself.
- Horizontal (Battle) art now uses the same post-toolbar height budget as
  portrait art, computed once in JS from the measured available height.
- Fix useRotatedPreviewBox's width/height bounds being swapped, which let
  rotated art overflow its width cap (e.g. ~469px wide on a 375px phone).
- Only apply the narrow side-by-side DFC budget at the >=860px breakpoint
  where the faces actually sit side by side; below it a DFC Battle's front
  was rendered at ~43vw.

src/styles.css

@@ -2012,7 +2012,7 @@ tbody tr:hover {
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: center;
-  gap: 16px;
+  gap: 16px; /* mirrored by PREVIEW_GAP in components.tsx */
   max-width: 96vw;
 }
 .preview-modal-faces {
@@ -2085,30 +2085,41 @@ tbody tr:hover {
   }
 }
 /* Compact mode (see ClickPreviewModal): the full layout would be taller than
-   the viewport, so a toolbar (pane toggle + close) shows one pane at a time —
-   a single face, or the info tile — with the art shrunk to fit the height
-   left over after the backdrop padding, toolbar and gap. */
+   the viewport, so it shows one pane at a time — a single face, or the info
+   tile — above a toolbar (pane toggle + close) that sits at the bottom for
+   thumb reach. The modal's width/height and `--preview-img-h` are set inline
+   from JS: a fixed box sized to the largest pane, so the toolbar stays put
+   when switching panes. Each pane is pushed down onto the toolbar
+   (`margin-top: auto`) and centered horizontally; an info tile taller than
+   the art budget scrolls within itself. */
 .preview-modal-compact {
-  /* A column (not the base wrapping row) so the toolbar stretches to exactly
-     the visible pane's width instead of the row's full 96vw. */
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: stretch;
-  --preview-img-h: calc(
-    100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px - 16px
-  );
 }
+.preview-modal-compact .preview-modal-faces,
+.preview-modal-compact .preview-info {
+  margin-top: auto;
+  align-self: center;
+}
+.preview-modal-compact .preview-modal-faces {
+  display: block;
+  flex-shrink: 0;
+}
+.preview-modal-compact .preview-info {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+/* Height mirrored by PREVIEW_BAR_H in components.tsx. */
 .preview-modal-bar {
-  flex-basis: 100%;
+  flex-shrink: 0;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
 }
-.preview-modal-compact .preview-modal-faces {
-  display: block;
-}
 .preview-modal-compact .preview-modal-img:not(.active) {
   display: none;
 }