update links page filter bar to change layout on screen size

frontend/src/routes/(app)/links/(component)/ShortenerCard.svelte

@@ -16,7 +16,7 @@
 	import Qr from '$lib/components/QR.svelte'
 
 	export let shortener: Shortener & {
-		projectName: string
+		projectName: string | null
 		visitorCount: number
 	}
 	export let shortener_url: string

frontend/src/routes/(app)/links/+page.svelte

@@ -53,7 +53,9 @@
 	}
 </script>
 
-<div class="flex gap-4 justify-start items-center p-4">
+<div
+	class="flex flex-wrap-reverse gap-4 justify-start items-center p-4">
+	<div class="flex gap-4 items-center">
 		<Popover.Root bind:open>
 			<Popover.Trigger asChild let:builder>
 				<Button
@@ -125,7 +127,8 @@
 				</Command.Root>
 			</Popover.Content>
 		</Popover.Root>
-	<Select.Root selected={{ label: data.sortBy, value: data.sortBy }}>
+		<Select.Root
+			selected={{ label: data.sortBy, value: data.sortBy }}>
 			<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
 				<Select.Value placeholder="Sort By" />
 			</Select.Trigger>
@@ -147,6 +150,8 @@
 			</Select.Content>
 			<Select.Input name="favoriteFruit" />
 		</Select.Root>
+	</div>
+	<div class="flex gap-4 items-center">
 		<Input
 			type="text"
 			placeholder="search"
@@ -162,6 +167,7 @@
 		<Button disabled={!search} on:click={() => (search = '')}
 			>Clear</Button>
 		<AddShortenerDialog bind:dialogOpen projects={data.projects} />
+	</div>
 </div>
 
 {#await data.shorteners}
@@ -184,10 +190,15 @@
 			</div>
 		</ScrollArea>
 	{:else}
-		<div class="flex flex-grow justify-center items-center w-full">
+		<div class="flex flex-grow p-4">
-			<div class="flex flex-col gap-12 items-center">
+			<div
-				<div class="flex flex-col gap-4 items-center">
+				class="flex flex-1 justify-center items-center rounded-lg border border-dashed shadow-sm">
+				<div
+					class="flex flex-grow justify-center items-center w-full">
+					<div class="flex flex-col gap-8 items-center">
+						<div class="flex flex-col gap-2 items-center">
 							<div class="text-4xl font-bold">No Shortener Found</div>
+							<p class="text-muted-foreground">Add a new shortener</p>
 						</div>
 						<Button
 							on:click={() => {
@@ -196,6 +207,8 @@
 							class="w-fit">Add Shortener</Button>
 					</div>
 				</div>
+			</div>
+		</div>
 	{/if}
 {/await}