update links dashboard and projects layout

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

@@ -13,11 +13,11 @@
 	<Separator class="" />
 </div>
 
-<div class="flex w-full flex-col items-stretch gap-2 px-6">
+<div class="flex w-full flex-wrap items-stretch gap-2 px-6">
 	{#each data.projects as project}
 		<a href={'/links?project=' + project.uuid}>
 			<Card.Root
-				class="w-full max-w-[500px] hover:cursor-pointer hover:bg-secondary">
+				class="w-[500px] hover:cursor-pointer hover:bg-secondary">
 				<Card.Header>
 					<Card.Title class="flex items-center gap-2">
 						{project.name}

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

@@ -113,7 +113,7 @@
 	<title>Shorteners</title>
 </svelte:head>
 
-<div class="flex items-center justify-between p-4">
+<div class="flex items-center justify-start gap-4 p-4">
 	<Popover.Root bind:open>
 		<Popover.Trigger asChild let:builder>
 			<Button

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

@@ -1,18 +1,11 @@
 <script lang="ts">
 	import type { PageData } from './$types'
-	import { Separator } from '$lib/components/ui/separator'
 	import { Button, buttonVariants } from '$lib/components/ui/button'
 	import * as Dialog from '$lib/components/ui/dialog'
 	import * as Card from '$lib/components/ui/card'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
-	import {
-		ExternalLink,
-		Loader2,
-		MoreVertical,
-		PlusCircle,
-	} from 'lucide-svelte'
+	import { ExternalLink, Loader2, PlusCircle } from 'lucide-svelte'
 
 	import { invalidateAll } from '$app/navigation'
 
@@ -42,8 +35,7 @@
 	}
 </script>
 
-<div class="flex min-h-[80px] items-center justify-between p-4">
-	<div class="text-3xl font-bold">Projects</div>
+<div class="flex items-center justify-start p-4">
 	<Dialog.Root bind:open={dialogOpen}>
 		<Dialog.Trigger
 			class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
@@ -77,14 +69,13 @@
 		</Dialog.Content>
 	</Dialog.Root>
 </div>
-<Separator />
 
 {#if data.projects.length > 0}
-	<div class="flex flex-col gap-4 overflow-scroll p-4">
+	<div class="flex flex-wrap gap-4 overflow-scroll p-4">
 		{#each data.projects as project}
 			<a href={'/links?project=' + project.uuid}>
 				<Card.Root
-					class="hover:bg-secondary w-full max-w-[500px] hover:cursor-pointer">
+					class="w-[500px] hover:cursor-pointer hover:bg-secondary">
 					<Card.Header>
 						<Card.Title class="flex items-center gap-2">
 							{project.name}
@@ -93,7 +84,7 @@
 					<Card.Content>
 						<div class="flex w-full justify-between">
 							<Button
-								class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm">
+								class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm">
 								<ExternalLink size={20} />
 								{project.shortener.length}
 								Shorteners