From 9cea5f75bb22995f73cd6ee76dc33554963bc01c Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 8 Jul 2024 18:31:58 -0700
Subject: [PATCH] refac: styling

---
 src/lib/components/chat/Chat.svelte           |  9 ++----
 src/lib/components/chat/ChatControls.svelte   | 28 +++++++++----------
 .../components/chat/Controls/Controls.svelte  |  2 +-
 .../chat/Messages/ResponseMessage.svelte      |  5 +++-
 src/lib/components/layout/Navbar.svelte       |  1 -
 5 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index ec1a4ac89..56659652f 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/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}
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 701693c71..da84ece01 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/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">
diff --git a/src/lib/components/chat/Controls/Controls.svelte b/src/lib/components/chat/Controls/Controls.svelte
index f17498419..96ddf8389 100644
--- a/src/lib/components/chat/Controls/Controls.svelte
+++ b/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
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 22c423478..69c387401 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/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]
 			});
 		}
 	};
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 9f339eb29..de71b08d9 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/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;