fix: header search overlay clipping and mobile fit
- Change overlay from position:absolute to position:fixed so it isn't clipped by main-content's overflow-y:auto - Set overlay top dynamically from header.offsetHeight so it always anchors exactly below the sticky header - Responsive max-height: accounts for player bar + bottom nav on mobile - Hide logo text on ≤359px screens to keep search pill wide enough Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
1 parent
36f968881b
commit
c8ccb80f2f
3 files changed
+11
-2
No files matched your search
+6
-1
@@ -1017,7 +1017,12 @@ export function onHeaderSearch(val) {
|
||||
if (clearBtn) clearBtn.style.display = val ? 'block' : 'none';
|
||||
clearTimeout(S._headerSearchTimer);
|
||||
if (!val.trim()) { if (overlay) overlay.style.display = 'none'; return; }
|
||||
if (overlay) overlay.style.display = 'block';
|
||||
if (overlay) {
|
||||
// position:fixed — anchor top to actual header bottom so it works with any header height
|
||||
const header = document.getElementById('mobile-header');
|
||||
if (header) overlay.style.top = header.offsetHeight + 'px';
|
||||
overlay.style.display = 'block';
|
||||
}
|
||||
const el = document.getElementById('header-search-results');
|
||||
S._headerSearchTimer = setTimeout(() => doLocalSearch(val, el), 300);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user