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;