refac: styling

src/lib/components/chat/Chat.svelte

@@ -1460,11 +1460,9 @@
 			</div>
 		{/if}
 
-		<div class="flex flex-col flex-auto z-10">
+		<div class="flex flex-col flex-auto z-10 {showControls ? 'lg:pr-[24rem]' : ''}">
 			<div
-				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden {showControls
-					? 'lg:pr-[28rem]'
-					: ''} "
+				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden"
 				id="messages-container"
 				bind:this={messagesContainerElement}
 				on:scroll={(e) => {
@@ -1490,7 +1488,7 @@
 				</div>
 			</div>
 
-			<div class={showControls ? 'lg:pr-[28rem]' : ''}>
+			<div class="">
 				<MessageInput
 					bind:files
 					bind:prompt
@@ -1513,7 +1511,6 @@
 				/>
 			</div>
 		</div>
-
 		<ChatControls bind:show={showControls} />
 	</div>
 {/if}

src/lib/components/chat/ChatControls.svelte

@@ -31,23 +31,21 @@
 </script>
 
 {#if largeScreen}
-	<div
-		class="fixed h-screen max-h-[100dvh] min-h-screen z-50 top-0 right-0 {show
-			? 'w-[28rem]'
-			: 'w-0 translate-x-[28rem] '} transition"
-	>
-		<div class="px-6 pt-14 pb-8 h-full">
-			<div
-				class=" px-5 py-4 h-full dark:bg-gray-850 border border-gray-100 dark:border-gray-800 rounded-xl shadow-lg"
-			>
-				<Controls
-					on:close={() => {
-						show = false;
-					}}
-				/>
+	{#if show}
+		<div class=" absolute bottom-0 right-0 z-20 h-full pointer-events-none">
+			<div class="pr-4 pt-14 pb-8 w-[24rem] h-full" in:slide={{ duration: 200, axis: 'x' }}>
+				<div
+					class="w-full h-full px-5 py-4 dark:bg-gray-850 border border-gray-100 dark:border-gray-800 rounded-xl shadow-lg z-50 pointer-events-auto"
+				>
+					<Controls
+						on:close={() => {
+							show = false;
+						}}
+					/>
+				</div>
 			</div>
 		</div>
-	</div>
+	{/if}
 {:else}
 	<Modal bind:show>
 		<div class="  px-5 py-4 h-full">

src/lib/components/chat/Controls/Controls.svelte

@@ -7,7 +7,7 @@
 
 <div class=" dark:text-white">
 	<div class="mb-2 flex justify-between items-center">
-		<div class=" text-xl font-medium font-primary">Chat Controls</div>
+		<div class=" text-lg font-medium font-primary">Chat Controls</div>
 
 		<div>
 			<button

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -152,7 +152,10 @@
 			}
 			tooltipInstance = tippy(`#info-${message.id}`, {
 				content: `<span class="text-xs" id="tooltip-${message.id}">${tooltipContent}</span>`,
-				allowHTML: true
+				allowHTML: true,
+				theme: 'dark',
+				arrow: false,
+				offset: [0, 4]
 			});
 		}
 	};

src/lib/components/layout/Navbar.svelte

@@ -107,7 +107,6 @@
 
 				<Tooltip content={$i18n.t('Controls')}>
 					<button
-						id="new-chat-button"
 						class=" flex cursor-pointer px-2 py-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
 						on:click={() => {
 							showControls = !showControls;