fix(modal): pin Related to rail bottom, floppy-disk download, drop suggestions cap
Right-rail layout fixes (operator-flagged 2026-06-26 — the prior change wasn't
the intended improvement):
- Pin the Related strip to the BOTTOM of the rail: the side becomes a flex
column with a scrolling main area (meta + provenance + tags + suggestions)
and a pinned Related footer (capped at 45% of the rail, scrolls past that).
Related now stays reachable no matter how long Tags/Suggestions run, and
self-collapses (no footer space) when there's nothing to show.
- Remove the 320px suggestions scroll cap (3fcc4ae) — it was a workaround "so
Related stays reachable"; pinning Related is the proper fix, so suggestions
flow in the single main scroll instead of a nested scrollbar.
- Shrink the Download button to a floppy-disk save icon (mdi-content-save); the
meta (dimensions/size/type) + save action now sit as a compact top block
(meta left, icon right). Copy link moves into the adjacent kebab menu.
ImageMetaBar is shared with the Explore center pane, so the compact save
control applies there too (parity). Mobile (<=900px) keeps the single body
scroll — no nested scroll, Related flows at the end.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -73,12 +73,17 @@
|
||||
</div>
|
||||
|
||||
<aside v-if="modal.current" class="fc-viewer__side">
|
||||
<ImageMetaBar />
|
||||
<ProvenancePanel />
|
||||
<TagPanel />
|
||||
<!-- Non-blocking: fetches its own similar set after the modal is up;
|
||||
collapses silently if empty/slow/failed (see RelatedStrip). -->
|
||||
<RelatedStrip />
|
||||
<!-- Meta + provenance + tags + suggestions scroll together here… -->
|
||||
<div class="fc-viewer__side-main">
|
||||
<ImageMetaBar />
|
||||
<ProvenancePanel />
|
||||
<TagPanel />
|
||||
</div>
|
||||
<!-- …while Related is PINNED to the bottom of the rail so it stays
|
||||
reachable no matter how long Tags/Suggestions run (operator-asked
|
||||
2026-06-26). Non-blocking: fetches its own similar set; collapses
|
||||
silently (and takes no footer space) if empty/slow/failed. -->
|
||||
<RelatedStrip class="fc-viewer__related" />
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
@@ -309,6 +314,18 @@ function nextFrame() {
|
||||
width: var(--fc-side-w); flex-shrink: 0;
|
||||
background: rgb(var(--v-theme-surface));
|
||||
border-left: 1px solid rgb(var(--v-theme-surface-light));
|
||||
/* Flex column: a scrolling main area + a pinned Related footer. */
|
||||
display: flex; flex-direction: column; min-height: 0;
|
||||
}
|
||||
.fc-viewer__side-main {
|
||||
flex: 1 1 auto; min-height: 0; overflow-y: auto;
|
||||
}
|
||||
.fc-viewer__related {
|
||||
/* Pinned to the bottom; capped so a tall strip can't swallow the rail —
|
||||
it scrolls internally past the cap. RelatedStrip's own border-top draws
|
||||
the divider; it self-collapses (no space) when there's nothing to show. */
|
||||
flex: 0 0 auto;
|
||||
max-height: 45%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -339,6 +356,10 @@ function nextFrame() {
|
||||
border-left: none;
|
||||
border-top: 1px solid rgb(var(--v-theme-surface-light));
|
||||
}
|
||||
/* The whole body scrolls on mobile — don't nest scrolls or pin Related; let
|
||||
the rail flow naturally (Related lands at the end). */
|
||||
.fc-viewer__side-main { flex: none; overflow: visible; }
|
||||
.fc-viewer__related { max-height: none; overflow: visible; }
|
||||
/* Re-center the prev/next arrows over the 55vh image band (their base
|
||||
top:50% would land on the scrolling panel); next uses the full width
|
||||
now that the panel is below, not beside. Close + integrity badge keep
|
||||
|
||||
Reference in New Issue
Block a user