styles

src/app.css

@@ -87,7 +87,7 @@
 	--sidebar-primary-foreground: oklch(1 0 0);
 	--sidebar-accent: oklch(0.2337 0.0261 260);
 	--sidebar-accent-foreground: oklch(0.9674 0.0013 250);
-	--sidebar-border: oklch(0 0 0);
+	--sidebar-border: oklch(0.3297 0.0294 237.7893);
 	--sidebar-ring: oklch(0.5797 0.1194 237.7893);
 	--radius: 0.5rem;
 	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
@@ -317,7 +317,7 @@
 	}
 
 	.modal-box {
-		@apply bg-background border-border col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] p-6;
+		@apply bg-background border-border col-start-1 row-start-1 max-h-screen w-11/12 max-w-[32rem] border p-6;
 		transition:
 			translate 0.3s ease-out,
 			scale 0.3s ease-out,

src/lib/components/ui/sidebar/sidebar-sidebar.svelte

@@ -9,7 +9,13 @@
 </script>
 
 {#if sidebar.root.showSidebar}
-	<div {...rest} class={cn('bg-sidebar col-start-1 h-screen w-[--sidebar-width]', className)}>
+	<div
+		{...rest}
+		class={cn(
+			'bg-sidebar border-sidebar-border col-start-1 h-screen w-[--sidebar-width] border-r',
+			className
+		)}
+	>
 		{@render children?.()}
 	</div>
 {/if}

src/routes/chat/+layout.svelte

@@ -384,7 +384,7 @@
 			<!-- header - top left -->
 			<div
 				class={cn(
-					'bg-sidebar/50 fixed top-2 left-2 z-50 flex w-fit rounded-lg p-1 backdrop-blur-lg md:top-0 md:right-0 md:left-0 md:rounded-none md:rounded-br-lg',
+					'bg-sidebar/50 fixed top-4 left-4 z-50 flex w-fit rounded-lg p-1 backdrop-blur-lg ',
 					{
 						'md:left-(--sidebar-width)': sidebarOpen,
 						'hidden md:flex': sidebarOpen,
@@ -404,10 +404,9 @@
 
 		<!-- header - top right -->
 		<div
-			class={cn(
-				'bg-sidebar/50 fixed top-2 right-2 z-50 flex rounded-lg p-1 backdrop-blur-lg md:top-0 md:right-0 md:rounded-none md:rounded-bl-lg',
-				{ 'hidden md:flex': sidebarOpen }
-			)}
+			class={cn('bg-sidebar/50 fixed top-4 right-4 z-50 flex rounded-lg p-1 backdrop-blur-lg ', {
+				'hidden md:flex': sidebarOpen,
+			})}
 		>
 			{#if page.params.id && currentConversationQuery.data}
 				<ShareButton conversationId={page.params.id as Id<'conversations'>} />