From bbf525142a3387bba1724c64baf31b6ccd374cac Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 16 Mar 2024 20:50:38 +0800
Subject: [PATCH] update settings page layout for scrolling

---
 .../settings/(components)/sidebar-nav.svelte  | 11 ++++-------
 .../src/routes/(app)/settings/+layout.svelte  | 19 ++++++++++++-------
 .../(app)/settings/account/+page.svelte       | 19 +++++++++++--------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte b/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte
index e54f656..7c2defe 100644
--- a/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte
+++ b/frontend/src/routes/(app)/settings/(components)/sidebar-nav.svelte
@@ -15,13 +15,10 @@
 	{#each items as item}
 		<Button
 			href={item.href}
-			variant="ghost"
-			class={cn(
-				$page.url.pathname === item.href
-					? 'bg-muted hover:bg-muted'
-					: 'hover:bg-transparent hover:underline',
-				'justify-start',
-			)}>
+			variant={$page.url.pathname == item.href
+				? 'secondary'
+				: 'ghost'}
+			class="justify-start hover:bg-secondary/50">
 			{item.title}
 		</Button>
 	{/each}
diff --git a/frontend/src/routes/(app)/settings/+layout.svelte b/frontend/src/routes/(app)/settings/+layout.svelte
index 757fc46..5e780d2 100644
--- a/frontend/src/routes/(app)/settings/+layout.svelte
+++ b/frontend/src/routes/(app)/settings/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ScrollArea } from '$lib/components/ui/scroll-area'
 	import { Separator } from '$lib/components/ui/separator'
 	import SidebarNav from './(components)/sidebar-nav.svelte'
 
@@ -14,21 +15,25 @@
 	]
 </script>
 
-<div class="space-y-6 p-10 pb-16">
+<div class="flex h-auto flex-col overflow-hidden p-10">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>
 		<p class="text-muted-foreground">
 			Manage your account settings and set e-mail preferences.
 		</p>
 	</div>
-	<Separator class="my-6" />
-	<div
-		class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
-		<aside class="-mx-4 lg:w-1/5">
+	<Separator class="my-4 lg:my-6" />
+	<div class="flex h-auto flex-col overflow-hidden lg:flex-row">
+		<aside class="border-b pb-4 lg:w-1/5 lg:border-none">
 			<SidebarNav items={sidebarNavItems} />
 		</aside>
-		<div class="flex-1 lg:max-w-2xl">
-			<slot />
+		<div
+			class="m-0 flex h-auto w-full overflow-hidden p-0 lg:max-w-2xl">
+			<ScrollArea class="mt-0 w-full">
+				<div class="py-6 lg:px-8 lg:py-0">
+					<slot />
+				</div>
+			</ScrollArea>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/(app)/settings/account/+page.svelte b/frontend/src/routes/(app)/settings/account/+page.svelte
index d4dc33d..193deee 100644
--- a/frontend/src/routes/(app)/settings/account/+page.svelte
+++ b/frontend/src/routes/(app)/settings/account/+page.svelte
@@ -39,10 +39,10 @@
 	}
 </script>
 
-<div class="space-y-6">
+<div class="flex h-auto flex-col gap-6">
 	<div>
 		<h3 class="text-lg font-medium">Account</h3>
-		<p class="text-muted-foreground text-sm">
+		<p class="text-sm text-muted-foreground">
 			Update your account settings.
 		</p>
 	</div>
@@ -54,7 +54,7 @@
 			type="text"
 			id="username"
 			bind:value={account_data.username} />
-		<p class="text-muted-foreground text-sm">Change your username.</p>
+		<p class="text-sm text-muted-foreground">Change your username.</p>
 	</div>
 
 	<div class="flex w-full max-w-sm flex-col gap-2">
@@ -64,7 +64,7 @@
 			type="email"
 			id="email"
 			bind:value={account_data.email} />
-		<p class="text-muted-foreground text-sm">Change your email.</p>
+		<p class="text-sm text-muted-foreground">Change your email.</p>
 	</div>
 
 	<Separator />
@@ -75,7 +75,7 @@
 			type="password"
 			id="old_password"
 			bind:value={account_data.old_password} />
-		<p class="text-muted-foreground text-sm">
+		<p class="text-sm text-muted-foreground">
 			Enter your old password in order to change it.
 		</p>
 	</div>
@@ -86,7 +86,7 @@
 			type="password"
 			id="new_password"
 			bind:value={account_data.new_password} />
-		<p class="text-muted-foreground text-sm">Change your password.</p>
+		<p class="text-sm text-muted-foreground">Change your password.</p>
 	</div>
 
 	<div class="flex w-full max-w-sm flex-col gap-2">
@@ -95,12 +95,15 @@
 			type="password"
 			id="new_password"
 			bind:value={account_data.confirm_password} />
-		<p class="text-muted-foreground text-sm">
+		<p class="text-sm text-muted-foreground">
 			Confirm your new password.
 		</p>
 	</div>
 
-	<Button disabled={isLoading} on:click={submit} class="flex gap-2">
+	<Button
+		disabled={isLoading}
+		on:click={submit}
+		class="flex w-fit gap-2">
 		{#if isLoading}
 			<Loader2 class="animate-spin" />
 		{/if}