danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix global search popover not scrolling when results overflow

Browse source 
The source-picker refactor introduced a new stable DOM structure inside
`#gsearch-results`:

    <div id="gsearch-results">            <!-- max-height: 60vh, flex-col -->
      <div id="gsearch-source-row" />     <!-- icon row, controller-rendered -->
      <div id="gsearch-fallback-banner" />
      <div id="gsearch-body" />           <!-- surface renders results here -->
    </div>

But the companion CSS never landed. `#gsearch-body` had default block
layout, so when results exceeded the 60vh cap, they clipped silently
instead of scrolling. The old structure had `.gsearch-results-body`
with `overflow-y: auto; flex: 1` directly inside the panel; that rule
still exists but its selector now matches a nested div with no flex
parent, so `flex: 1` is a no-op and overflow doesn't trigger.

Fix: give the three stable children the right flex behaviour so the
body fills remaining space and scrolls.

- `#gsearch-source-row` and `#gsearch-fallback-banner` stay at natural
  height (flex-shrink: 0).
- `#gsearch-body` grows (flex: 1 1 auto), can shrink below content
  height (min-height: 0 — this is the critical bit, otherwise flex
  items won't shrink below their intrinsic size and overflow never
  triggers), and scrolls vertically.

Styled scrollbar matches the rest of the panel (4px, translucent thumb).
This commit is contained in:
Broque Thomas 2026-04-24 08:34:03 -07:00
parent ddbcdfe73a
commit 2b7d6c8c7c
1 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
webui/static/style.css
View file

@ -5466,6 +5466,22 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.gsearch-results.visible { display: flex; animation: gsearchSlideUp 0.2s ease; }
/* Stable results-panel structure built by downloads.js _doInit: the source
row and fallback banner keep their natural height; #gsearch-body grows
to fill what's left of the 60vh cap and scrolls when content overflows.
Without the flex:1 + overflow on #gsearch-body, content past the cap
was clipped with no scrollbar — the source-picker refactor introduced
the structure but not the accompanying CSS. */
#gsearch-source-row { flex-shrink: 0; }
#gsearch-fallback-banner { flex-shrink: 0; }
#gsearch-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
#gsearch-body::-webkit-scrollbar { width: 4px; }
#gsearch-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
@keyframes gsearchSlideUp {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }