Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix(web): search results panel spans full content width

Browse Source 
The header search overlay was anchored to the search bar's width, leaving a
dead strip on the right where scrolling hit the background page. Anchor it to
the sticky #mobile-header instead (which already sits right of the sidebar), so
it spans the full main-content width — sidebar stays visible, no dead strip.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Opus 4.8 committed 2026-08-23 12:46:50 +02:00
1 parent 026b392657
commit 7996971ba0
2 files changed
+7 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

styles.css
+2 -2
View File
@@ -68,13 +68,13 @@ html.ns-authed #setup-screen{display:none}
.search-box input::placeholder{color:var(--text3)}
.search-box svg{flex-shrink:0;color:var(--text3)}
.header-search-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:7px 12px;cursor:text;transition:border-color .2s}
.header-search-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:7px 12px;cursor:text;transition:border-color .2s}
.header-search-wrap:focus-within{border-color:var(--border2)}
.header-search-wrap svg{flex-shrink:0;color:var(--text3)}
.header-search-wrap input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--font);font-size:14px}
.header-search-wrap input::placeholder{color:var(--text3)}
#header-search-overlay{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5);padding:6px 8px 12px;z-index:11;overflow-y:auto;max-height:calc(100vh - 140px)}
#header-search-overlay{position:absolute;top:100%;left:12px;right:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.5);padding:6px 12px 16px;z-index:11;overflow-y:auto;max-height:calc(100vh - 140px)}
@media(max-width:768px){#header-search-overlay{max-height:calc(100vh - var(--player-h) - 160px)}}
@media(max-width:359px){#mobile-header .sidebar-logo span{display:none}}