Updated search bar

materialious/src/lib/Search.svelte

@@ -23,9 +23,13 @@
 			suggestionsForSearch = (await getSearchSuggestions(event.target.value)).suggestions;
 		}, 250);
 	};
+
+	function handleSubmit() {
+		goto(`/search/${encodeURIComponent(search)}`);
+	}
 </script>
 
-<form on:submit|preventDefault={() => goto(`/search/${encodeURIComponent(search)}`)}>
+<form on:submit|preventDefault={handleSubmit}>
 	<div class="field prefix round fill no-margin search">
 		<i class="front">search</i>
 		<input bind:value={search} on:click={() => document.getElementById('search')?.focus()} />
@@ -36,8 +40,15 @@
 					placeholder={$_('searchPlaceholder')}
 					type="text"
 					id="search"
+					required
 					bind:value={search}
-					on:keyup={(target) => debouncedSearch(target)}
+					on:keyup={(event) => {
+						if (event.key === 'Enter') {
+							handleSubmit();
+						} else {
+							debouncedSearch(event);
+						}
+					}}
 				/>
 				<i class="front" on:click={() => (search = '')}>close</i>
 			</div>

materialious/src/routes/playlist/[slug]/+page.svelte

@@ -69,7 +69,7 @@
 	</p>
 	<div class="divider" style="margin-bottom: 1em;"></div>
 
-	<article class="medium scroll no-padding no-elevate no-round">
+	<article style="max-height: 200px;" class="scroll no-padding no-elevate no-round">
 		<p style="white-space: pre-line;word-wrap: break-word;">{data.playlist.description}</p>
 	</article>
 </article>