fix(modal): Esc closes from tag input; Provenance cards scroll at ~2.5
Two operator-flagged UX gaps from 2026-06-01: 1. **Esc trapped inside the tag-entry field** The autofocused TagAutocomplete input made Esc-to-close unreachable because ImageViewer's keydown handler bailed early on `isTextEntry(ev.target)` for every key including Escape. Now Escape closes the modal from text inputs too — except when a Vuetify overlay is open (FandomPicker, autocomplete dropdown, suggestion 3-dot menu), in which case that overlay's own Esc-handling fires instead of closing the whole modal mid-interaction. Detected via `.v-overlay--active`. Arrow keys still gate on isTextEntry so the tag input handles typing without navigating images. 2. **Provenance cards expanded the side panel unbounded** When an image had many ImageProvenance entries the cards stack pushed the Tags section below the fold. Wrapped the cards in a `.fc-prov__cards` container with max-height 270px (≈2.5 cards) and thin overflow scrollbar. Title stays anchored at top; Tags panel sits at a consistent position below regardless of provenance count.
This commit is contained in:
@@ -10,7 +10,11 @@
|
||||
density="compact"
|
||||
>{{ state.error }}</v-alert>
|
||||
|
||||
<template v-else>
|
||||
<!-- Cards scroll independently of the section title + attachments
|
||||
below them. Cap at ~2.5 cards visible (operator-asked 2026-06-01:
|
||||
keeps the Tags section anchored below at a consistent position;
|
||||
the half-visible third card hints there's more). -->
|
||||
<div v-else class="fc-prov__cards">
|
||||
<article
|
||||
v-for="e in state.entries" :key="e.provenance_id" class="fc-prov__card"
|
||||
>
|
||||
@@ -58,7 +62,7 @@
|
||||
</RouterLink>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div v-if="attachments.length" class="fc-prov__attach">
|
||||
<h4 class="fc-prov__attach-title">Attachments</h4>
|
||||
@@ -159,6 +163,18 @@ function openPost(postId, artistId) {
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.fc-prov__cards {
|
||||
/* 2.5 cards-worth at the typical collapsed card height (~108px each
|
||||
incl. 10px gap). Slightly under to ensure the third card's bottom
|
||||
edge is clipped — the visual cue that there's more below. */
|
||||
max-height: 270px;
|
||||
overflow-y: auto;
|
||||
/* Hairline scrollbar that doesn't compete with content. */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(var(--v-theme-surface-light)) transparent;
|
||||
/* Pad-right so the scrollbar gutter doesn't squeeze card borders. */
|
||||
padding-right: 4px;
|
||||
}
|
||||
.fc-prov__card {
|
||||
border: 1px solid rgb(var(--v-theme-surface-light));
|
||||
border-radius: 6px; padding: 10px 12px; margin-bottom: 10px;
|
||||
|
||||
Reference in New Issue
Block a user