refac: styling

src/lib/components/chat/Artifacts.svelte

@@ -213,15 +213,6 @@
 			<div
 				class="pointer-events-auto z-20 flex justify-between items-center p-2.5 font-primar text-gray-900 dark:text-white"
 			>
-				<button
-					class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
-					on:click={() => {
-						showArtifacts.set(false);
-					}}
-				>
-					<ArrowLeft className="size-3.5  text-gray-900 dark:text-white" />
-				</button>
-
 				<div class="flex-1 flex items-center justify-between pr-1">
 					<div class="flex items-center space-x-2">
 						<div class="flex items-center gap-0.5 self-center min-w-fit" dir="ltr">

src/lib/components/chat/ChatControls.svelte

@@ -205,12 +205,12 @@
 
 		{#if $showControls}
 			<PaneResizer
-				class="relative flex w-2 items-center justify-center bg-white dark:bg-gray-850 border-l border-gray-100 dark:border-gray-850  group"
+				class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800  transition z-20"
 				id="controls-resizer"
 			>
-				<div class="z-10 flex h-7 w-5 items-center justify-center rounded-xs">
-					<EllipsisVertical className="size-4 invisible group-hover:visible" />
-				</div>
+				<div
+					class=" absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
+				/>
 			</PaneResizer>
 		{/if}
 
@@ -243,7 +243,7 @@
 					<div
 						class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
 							? ' '
-							: 'pl-3 pr-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 '} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
+							: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 '} z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
 						id="controls-container"
 					>
 						{#if $showCallOverlay}