Smaller changes

www/src/lib/components/Favorites.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <div class="flex flex-col flex-grow gap-4 max-h-full">
-	<p class="p-4 text-xl text-center">Playlists</p>
+	<p class="p-4 text-lg text-center">Playlists</p>
 	<List>
 		{#each $userPlaylists as playlist}
 			<ListItem>

www/src/lib/components/ListAlbum.svelte

@@ -5,11 +5,16 @@
 </script>
 
 <div class="flex gap-4 items-center w-full">
-	<img loading="lazy" class="size-12 rounded-md" src={album.coverArt} alt={album.title} />
+	<img
+		class="text-sm text-gray-500 bg-gray-800 rounded-md size-12 aspect-square"
+		loading="lazy"
+		src={album.coverArt}
+		alt={album.title}
+	/>
 
 	<div class="overflow-hidden w-full">
 		<div class="flex justify-between">
-			<h3 class="text-xl truncate">
+			<h3 class="text-lg truncate">
 				{album.title}
 			</h3>
 			<Info explicit={album.explicit} hiresAvailable={album.hiresAvailable} />

www/src/lib/components/ListTrack.svelte

@@ -6,7 +6,7 @@
 
 <div>
 	<div class="flex justify-between items-center">
-		<h3 class="text-xl truncate">
+		<h3 class="text-lg truncate">
 			{track.title}
 		</h3>
 		<Info explicit={track.explicit} hiresAvailable={track.hiresAvailable} />

www/src/lib/components/Marquee.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { tick } from 'svelte';
+	import { afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
 
 	export let input: string;
@@ -8,7 +8,7 @@
 
 	const enableMarquee = writable(false);
 
-	tick().then(() => {
+	afterUpdate(() => {
 		if (titleWidth > titleWrapperWidth) {
 			enableMarquee.set(true);
 		} else {

www/src/lib/components/NowPlaying.svelte

@@ -19,11 +19,11 @@
 </script>
 
 <div class="flex flex-col gap-8 justify-between items-center p-8 h-full landscape:flex-row">
-	<div class="max-h-full rounded-lg shadow-lg overflow-clip aspect-square">
+	<div class="max-h-full rounded-lg shadow-lg overflow-clip aspect-square max-w-[600px]">
 		<img src={$coverImage} alt={$entityTitle} class="object-contain" />
 	</div>
 
-	<div class="flex flex-col flex-grow justify-center w-full">
+	<div class="flex flex-col flex-grow justify-center w-full max-w-md md:max-w-[600px]">
 		<div class="flex justify-between items-center">
 			<span class="text-xl truncate">
 				<Marquee input={$entityTitle} />
@@ -37,7 +37,7 @@
 		</div>
 
 		<div class="flex flex-col gap-y-4 mx-auto w-full">
-			<div class="flex justify-between items-center">
+			<div class="flex gap-4 justify-between items-center">
 				<span class="text-2xl truncate">
 					<Marquee input={$currentTrack?.title} />
 				</span>

www/src/lib/components/Queue.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { queue, entityTitle, listType, currentTrack } from '$lib/websocket';
+	import Info from './Info.svelte';
 	import List from './List.svelte';
 	import ListItem from './ListItem.svelte';
 
@@ -8,9 +9,9 @@
 
 <div class="flex flex-col flex-grow gap-4 max-h-full">
 	<div class="p-4 text-center">
-		<p class="text-xl">{$entityTitle}</p>
+		<p class="text-lg">{$entityTitle}</p>
 		{#if $listType === 'Album'}
-			<p class="text-xl">by {$currentTrack.artist.name}</p>
+			<p class="text-lg">by {$currentTrack.artist.name}</p>
 		{/if}
 	</div>
 
@@ -28,9 +29,12 @@
 					{:else if $listType === 'Playlist'}
 						<span>{track.position.toString().padStart(2, '0')}</span>
 					{/if}
-					<span class="truncate">
-						{track.title}
-					</span>
+					<div class="flex overflow-hidden flex-grow justify-between items-center">
+						<span class="truncate">
+							{track.title}
+						</span>
+						<Info explicit={track.explicit} hiresAvailable={track.hiresAvailable} />
+					</div>
 				</button>
 			</ListItem>
 		{/each}

www/src/lib/components/Search.svelte

@@ -8,6 +8,7 @@
 	import PlaylistTracks from './PlaylistTracks.svelte';
 	import { Icon, MagnifyingGlass, XMark } from 'svelte-hero-icons';
 	import ListTrack from './ListTrack.svelte';
+	import { onMount } from 'svelte';
 
 	export let controls;
 
@@ -27,12 +28,26 @@
 			controls.search(query);
 		}
 	};
+
+	let searchInput;
+
+	onMount(() => searchInput.focus());
 </script>
 
 <div class="flex flex-col flex-grow gap-4 max-h-full">
 	<div class="flex flex-col gap-4 p-4">
 		<form on:submit={onSubmit} class="flex flex-row">
-			<input name="query" class="p-2 w-full text-black rounded" type="text" placeholder="Search" />
+			<input
+				bind:this={searchInput}
+				name="query"
+				class="p-2 w-full text-black rounded"
+				type="text"
+				placeholder="Search"
+				spellcheck="false"
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="off"
+			/>
 			<Button type="submit"><Icon src={MagnifyingGlass} class="size-6" solid /></Button>
 		</form>
 
@@ -73,7 +88,7 @@
 			{#each $searchResults.artists as artist}
 				<ListItem>
 					<button
-						class="p-4 w-full text-xl text-left truncate"
+						class="p-4 w-full text-lg text-left truncate"
 						on:click|stopPropagation={() => {
 							$artistAlbums.albums = [];
 							$artistAlbums.id = null;
@@ -101,7 +116,7 @@
 			{#each $searchResults.playlists as playlist}
 				<ListItem>
 					<button
-						class="p-4 w-full text-base text-left"
+						class="p-4 w-full text-lg text-left truncate"
 						on:click|stopPropagation={() => {
 							$playlistTracks.tracks = [];
 							$playlistTracks.id = null;
@@ -110,7 +125,7 @@
 							showPlaylistTracks.set(true);
 						}}
 					>
-						<span>{playlist.title}</span>
+						{playlist.title}
 					</button>
 				</ListItem>
 			{/each}

www/src/routes/+page.svelte

@@ -44,7 +44,7 @@
 	<title>hifi.rs: {$currentStatus}</title>
 </svelte:head>
 
-<div class="flex flex-col justify-between h-full">
+<div class="flex flex-col justify-between h-full pt-safe px-safe">
 	<div class="flex overflow-auto flex-col justify-between my-auto h-full">
 		{#if $activePage == 'nowPlaying' && $currentTrack}
 			<NowPlaying {controls} />