diff --git a/CHANGELOG.md b/CHANGELOG.md index e842d18..c58c312 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/index.html b/index.html index 15c904f..5f57caf 100644 --- a/index.html +++ b/index.html @@ -107,6 +107,10 @@ + +
- diff --git a/styles.css b/styles.css index afd1da4..4e8483d 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{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}}