feat: update layout and structure of search options in facets page

Author: VaiTon

src/routes/facets/[facet]/[value]/+page.svelte

@@ -34,7 +34,7 @@
 
 <h2 class="my-8 text-3xl font-bold">Exploring {facet.name}: {facet.value}</h2>
 
-<div class="my-8 grid w-full gap-4 lg:grid-cols-2">
+<div class="my-8 flex w-full flex-col gap-4">
 	{#if Object.entries(knowledgePanels).length > 0}
 		<div class="w-full">
 			<h2 class="mb-2 grow text-2xl font-bold">Knowledge Panels</h2>
@@ -43,54 +43,56 @@
 	{/if}
 
 	<div class="w-full space-y-2">
-		<h2 class="grow text-2xl font-bold">Search Options</h2>
-		<label class="select w-full">
-			<span class="label w-50">{$_('search.page_size')}</span>
-			<select
-				value={`${results.page_size}`}
-				oninput={(e) => {
-					const params = new SvelteURLSearchParams(page.url.search);
-					params.set('page_size', e.currentTarget.value);
-					goto(`?${params}`);
-				}}
-			>
-				<option value="10">10</option>
-				<option value="50">50</option>
-				<option value="100">100</option>
-				<option value="200">200</option>
-			</select>
-		</label>
+		<h2 class="mb-2 grow text-2xl font-bold">Search Options</h2>
+		<div class="grid gap-4 md:grid-cols-3">
+			<label class="select w-full">
+				<span class="label w-50">{$_('search.page_size')}</span>
+				<select
+					value={`${results.page_size}`}
+					oninput={(e) => {
+						const params = new SvelteURLSearchParams(page.url.search);
+						params.set('page_size', e.currentTarget.value);
+						goto(`?${params}`);
+					}}
+				>
+					<option value="10">10</option>
+					<option value="50">50</option>
+					<option value="100">100</option>
+					<option value="200">200</option>
+				</select>
+			</label>
 
-		<label class="select w-full">
-			<span class="label w-50">{$_('search.sort_by_label')}</span>
-			<select
-				value={searchOptions.sortBy || 'last_modified_t'}
-				oninput={(e) => {
-					const params = new SvelteURLSearchParams(page.url.search);
-					params.set('sort_by', e.currentTarget.value);
-					goto(`?${params}`);
-				}}
-			>
-				<option value="popularity">Popularity</option>
-				<option value="nutriscore_score">{$_('nutriscore')}</option>
-				<option value="environmental_score_score">{$_('ecoscore')}</option>
-				<option value="created_t">{$_('search.creation_date')}</option>
-				<option value="last_modified_t">{$_('search.last_modified_date')}</option>
-			</select>
-		</label>
+			<label class="select w-full">
+				<span class="label w-50">{$_('search.sort_by_label')}</span>
+				<select
+					value={searchOptions.sortBy || 'last_modified_t'}
+					oninput={(e) => {
+						const params = new SvelteURLSearchParams(page.url.search);
+						params.set('sort_by', e.currentTarget.value);
+						goto(`?${params}`);
+					}}
+				>
+					<option value="popularity">Popularity</option>
+					<option value="nutriscore_score">{$_('nutriscore')}</option>
+					<option value="environmental_score_score">{$_('ecoscore')}</option>
+					<option value="created_t">{$_('search.creation_date')}</option>
+					<option value="last_modified_t">{$_('search.last_modified_date')}</option>
+				</select>
+			</label>
 
-		<label class="select mb-2 w-full">
-			<span class="label w-50">{$_('search.advanced_view')}</span>
-			<select
-				value={`${listView}`}
-				oninput={(e) => {
-					listView = e.currentTarget.value === 'true';
-				}}
-			>
-				<option value="false">Off</option>
-				<option value="true">On</option>
-			</select>
-		</label>
+			<label class="select w-full">
+				<span class="label w-50">{$_('search.advanced_view')}</span>
+				<select
+					value={`${listView}`}
+					oninput={(e) => {
+						listView = e.currentTarget.value === 'true';
+					}}
+				>
+					<option value="false">Off</option>
+					<option value="true">On</option>
+				</select>
+			</label>
+		</div>
 	</div>
 </div>