From 3fcc4aeb432fd735f658d9c197fdb3f2acdc400b Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 24 Jun 2026 00:01:25 -0400
Subject: [PATCH] fix(modal): scroll-cap the suggestions list so Related stays
 reachable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../src/components/modal/SuggestionsPanel.vue  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/modal/SuggestionsPanel.vue b/frontend/src/components/modal/SuggestionsPanel.vue
index 8b0ce45..0e40779 100644
--- a/frontend/src/components/modal/SuggestionsPanel.vue
+++ b/frontend/src/components/modal/SuggestionsPanel.vue
@@ -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;