fix(modal): scroll-cap the suggestions list so Related stays reachable
The right rail scrolls as a whole and ProvenancePanel already caps its cards + attachments, but SuggestionsPanel had no cap — a long suggestion set (the General bucket runs to dozens) stretched the rail and pushed the Related strip below the fold. Wrap the suggestion groups in a 320px max-height scroll box (hairline scrollbar matching the provenance regions), so suggestions scroll internally and Related stays visible. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XCUHUGQLrBrkgyk1t49kpX
This commit is contained in:
@@ -12,7 +12,11 @@
|
||||
No suggestions above threshold.
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Scroll-capped so a long suggestion set (the General bucket can run to
|
||||
dozens) scrolls WITHIN this box instead of stretching the right rail
|
||||
and shoving the Related strip below the fold. Mirrors the
|
||||
ProvenancePanel cards/attachments treatment. -->
|
||||
<div v-else class="fc-suggestions__list">
|
||||
<SuggestionsCategoryGroup
|
||||
v-for="cat in peopleCats" :key="cat"
|
||||
v-show="store.byCategory[cat] && store.byCategory[cat].length"
|
||||
@@ -27,7 +31,7 @@
|
||||
@accept="onAccept" @alias="onAlias" @remove-alias="onRemoveAlias"
|
||||
@dismiss="store.dismiss"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<v-dialog v-model="aliasDialog" max-width="480">
|
||||
<AliasPickerDialog
|
||||
@@ -125,6 +129,16 @@ async function onRemoveAlias(s) {
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.fc-suggestions__list {
|
||||
/* Cap the suggestion run so it scrolls internally rather than pushing the
|
||||
Related strip off the bottom of the rail. Hairline scrollbar matching
|
||||
ProvenancePanel's capped regions. */
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(var(--v-theme-surface-light)) transparent;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.fc-suggestions__skeleton { display: flex; flex-direction: column; gap: 8px; }
|
||||
.fc-suggestions__skel-row {
|
||||
height: 18px; border-radius: 4px;
|
||||
|
||||
Reference in New Issue
Block a user