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

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>

CHANGELOG.md

@@ -98,6 +98,10 @@ like Android), concert events become **reliable across web/Android**, and severa
 - **Web importer preview layout** — the SoundCloud track row was missing its grid number-cell, so the
   4-column `.gtrack-item` grid squeezed the cover into 28px and the title into 52px (title wrapped
   one character per line). Added the missing cell.
+- **Header search dropdown covered the sidebar (Web)** — `#header-search-overlay` was
+  `position:fixed; left:0; right:0` (full viewport), overlapping the left sidebar. It's now anchored
+  to the search bar (`position:absolute` inside the wrap), so it drops down at the bar's width and the
+  sidebar stays visible.
 - **Android artist albums incomplete** — `lookupArtistAlbums` filtered to `record_type == "album"`,
   dropping EPs and singles that Deezer (and the web app) show. Now returns all, sorted album → EP →
   single.

index.html

@@ -107,6 +107,10 @@
             <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
             <input id="header-search-input" type="text" placeholder="Suchen…" oninput="onHeaderSearch(this.value)" autocomplete="off">
             <button id="header-search-clear" onclick="closeHeaderSearch()" style="display:none;background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:0;line-height:1;flex-shrink:0">✕</button>
+            <!-- Results drop down anchored to the search bar's width (not full-viewport), so the sidebar stays visible -->
+            <div id="header-search-overlay" style="display:none">
+              <div id="header-search-results"></div>
+            </div>
           </div>
           <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
             <button class="hbtn notif-bell-btn" onclick="toggleNotifPanel()" title="Benachrichtigungen" style="padding:8px;color:var(--text2)">
@@ -118,9 +122,6 @@
             </button>
           </div>
         </div>
-        <div id="header-search-overlay" style="display:none">
-          <div id="header-search-results"></div>
-        </div>
       </div>
 
       <!-- HOME -->

styles.css

@@ -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}}