fix(explore): bound the 3-pane grid row so a tall rail can't scroll the page
The panes grid had no explicit row, so the implicit `auto` row sized to its tallest pane's content. With Provenance + Tags + a long Suggestions list, the rail outgrew the fixed-height workspace, spilled over and made the WHOLE page scrollable — showing as a weird empty gap at the top (operator-flagged 2026-06-26). grid-template-rows: minmax(0, 1fr) bounds the row to the container so each pane's own overflow-y:auto scrolls internally instead. Reset to `none` in the stacked (<=1100px) layout where the page is meant to scroll. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -235,11 +235,17 @@ onUnmounted(() => document.removeEventListener('keydown', onKeyDown))
|
|||||||
.fc-ex__crumb:focus-visible { outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 1px; }
|
.fc-ex__crumb:focus-visible { outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 1px; }
|
||||||
.fc-ex__reseed { margin-left: auto; }
|
.fc-ex__reseed { margin-left: auto; }
|
||||||
|
|
||||||
/* The three panes fill the remaining height; each scrolls on its own. */
|
/* The three panes fill the remaining height; each scrolls on its own.
|
||||||
|
grid-template-rows: minmax(0, 1fr) BOUNDS the single row to the container
|
||||||
|
height — without it the row is `auto` and a tall pane (Provenance + Tags +
|
||||||
|
a long Suggestions list) grows the row past the fixed-height view, spilling
|
||||||
|
over and scrolling the whole page (the weird top gap). Bounded, the panes'
|
||||||
|
own overflow-y:auto kicks in and they scroll internally instead. */
|
||||||
.fc-ex__panes {
|
.fc-ex__panes {
|
||||||
flex: 1 1 auto; min-height: 0;
|
flex: 1 1 auto; min-height: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 340px minmax(0, 1fr) var(--fc-side-w, 320px);
|
grid-template-columns: 340px minmax(0, 1fr) var(--fc-side-w, 320px);
|
||||||
|
grid-template-rows: minmax(0, 1fr);
|
||||||
gap: 1px;
|
gap: 1px;
|
||||||
background: rgb(var(--v-theme-surface-light));
|
background: rgb(var(--v-theme-surface-light));
|
||||||
}
|
}
|
||||||
@@ -303,6 +309,8 @@ onUnmounted(() => document.removeEventListener('keydown', onKeyDown))
|
|||||||
.fc-ex { height: auto; }
|
.fc-ex { height: auto; }
|
||||||
.fc-ex__panes {
|
.fc-ex__panes {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
/* Stacked: let each pane take its natural height and the page scroll. */
|
||||||
|
grid-template-rows: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
.fc-ex__viewer { order: -1; min-height: 60vh; }
|
.fc-ex__viewer { order: -1; min-height: 60vh; }
|
||||||
|
|||||||
Reference in New Issue
Block a user