fix(web): center nav in window + Library link + Search placeholder
test-web / test (push) Failing after 31s
test-web / test (push) Failing after 31s
Three operator-reported issues:
- Header was flex with the nav inside a flex-1 span — when the
right side (search + user menu) grew wider than the left
(wordmark), the nav's centered position drifted off page-center.
Switched to grid-cols-3 with justify-self-{start,center,end} so
the middle column pins to true window-center regardless of side
widths.
- Library nav link pointed to /library, which 308-redirects via
+page.server.ts. Operator reported it didn't navigate. Linked the
nav button directly to /library/artists so SPA navigation skips
the redirect roundtrip. matchPrefix='/library' keeps isActive
matching every Library tab.
- SearchInput placeholder was 'Search artists, albums, tracks…' —
shortened to 'Search' and added a Lucide Search icon inside the
input on the left. Padding adjusted (pl-7) so the input text
clears the icon.
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { page } from '$app/state';
|
||||
import { goto } from '$app/navigation';
|
||||
import { untrack } from 'svelte';
|
||||
import { Search } from 'lucide-svelte';
|
||||
|
||||
let value = $state(page.url.searchParams.get('q') ?? '');
|
||||
let timeout: ReturnType<typeof setTimeout> | null = null;
|
||||
@@ -51,12 +52,20 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search artists, albums, tracks…"
|
||||
aria-label="Search"
|
||||
bind:value
|
||||
oninput={onInput}
|
||||
onkeydown={onKey}
|
||||
class="w-full max-w-md rounded border border-border bg-surface px-3 py-1 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
||||
/>
|
||||
<label class="relative block w-full max-w-md">
|
||||
<Search
|
||||
size={14}
|
||||
strokeWidth={1.5}
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-text-secondary"
|
||||
/>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
bind:value
|
||||
oninput={onInput}
|
||||
onkeydown={onKey}
|
||||
class="w-full rounded border border-border bg-surface pl-7 pr-3 py-1 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
||||
/>
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user