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

fix(web): header search dropdown no longer covers the sidebar

Browse Source 
Anchor #header-search-overlay to the search bar (position:absolute inside a
relative .header-search-wrap) instead of position:fixed full-viewport width,
so the results drop down at the bar's width and the left sidebar stays visible.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Opus 4.8 committed 2026-08-22 00:41:29 +02:00
1 parent b7c96451d8
commit 67642f8ab8
3 files changed
+10 -5
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{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{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: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:fixed;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 12px 32px rgba(0,0,0,.5);padding:6px 12px 20px;z-index:11;overflow-y:auto;max-height:calc(100vh - 120px)}
#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)}
@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}}