From 7996971ba02a8639b808a4db820353435cbc7851 Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Sun, 23 Aug 2026 12:46:50 +0200
Subject: [PATCH] fix(web): search results panel spans full content width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 index.html | 9 +++++----
 styles.css | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 5f57caf..c9d9325 100644
--- a/index.html
+++ b/index.html
@@ -107,10 +107,6 @@
             <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)">
@@ -122,6 +118,11 @@
             </button>
           </div>
         </div>
+        <!-- Results panel: spans the full main-content width (anchored to the header, which already
+             sits right of the sidebar) so it never covers the sidebar and leaves no dead scroll strip -->
+        <div id="header-search-overlay" style="display:none">
+          <div id="header-search-results"></div>
+        </div>
       </div>
 
       <!-- HOME -->
diff --git a/styles.css b/styles.css
index 1cf3412..c25d7e1 100644
--- a/styles.css
+++ b/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{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}}