From 47e377967e7aecd33d72112ee86a05b9ff9ec37b Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Mon, 21 Oct 2024 00:05:27 -0700
Subject: [PATCH] refac: styling

---
 src/lib/components/admin/Settings.svelte      | 22 ++++++------
 .../components/admin/Settings/Audio.svelte    |  2 +-
 .../admin/Settings/Connections.svelte         |  2 +-
 .../admin/Settings/Documents.svelte           |  2 +-
 .../components/admin/Settings/General.svelte  |  2 +-
 .../components/admin/Settings/Images.svelte   |  2 +-
 .../admin/Settings/Interface.svelte           |  2 +-
 .../admin/Settings/Pipelines.svelte           |  2 +-
 .../components/admin/Settings/Users.svelte    |  2 +-
 .../admin/Settings/WebSearch.svelte           |  2 +-
 .../components/chat/Settings/Account.svelte   |  2 +-
 src/lib/components/chat/Settings/Audio.svelte |  2 +-
 .../components/chat/Settings/General.svelte   |  2 +-
 .../components/chat/Settings/Interface.svelte |  2 +-
 .../chat/Settings/Personalization.svelte      |  2 +-
 src/lib/components/chat/SettingsModal.svelte  | 34 +++++++++----------
 .../components/playground/Playground.svelte   |  2 +-
 .../workspace/Functions/FunctionEditor.svelte |  2 +-
 .../workspace/Tools/ToolkitEditor.svelte      |  2 +-
 19 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/lib/components/admin/Settings.svelte b/src/lib/components/admin/Settings.svelte
index e02b79419..8d48a7765 100644
--- a/src/lib/components/admin/Settings.svelte
+++ b/src/lib/components/admin/Settings.svelte
@@ -42,7 +42,7 @@
 		class="tabs flex flex-row overflow-x-auto space-x-1 max-w-full lg:space-x-0 lg:space-y-1 lg:flex-col lg:flex-none lg:w-44 dark:text-gray-200 text-xs text-left scrollbar-none"
 	>
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab ===
 			'general'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -68,7 +68,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'users'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -92,7 +92,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'connections'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -116,7 +116,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'models'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -142,7 +142,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'documents'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -172,7 +172,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'web'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -196,7 +196,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'interface'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -222,7 +222,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'audio'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -249,7 +249,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'images'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -275,7 +275,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'pipelines'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
@@ -305,7 +305,7 @@
 		</button>
 
 		<button
-			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
+			class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
 			'db'
 				? 'bg-gray-100 dark:bg-gray-800'
 				: ' hover:bg-gray-50 dark:hover:bg-gray-850'}"
diff --git a/src/lib/components/admin/Settings/Audio.svelte b/src/lib/components/admin/Settings/Audio.svelte
index b76a53153..9ab9ab099 100644
--- a/src/lib/components/admin/Settings/Audio.svelte
+++ b/src/lib/components/admin/Settings/Audio.svelte
@@ -551,7 +551,7 @@
 	</div>
 	<div class="flex justify-end text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/admin/Settings/Connections.svelte b/src/lib/components/admin/Settings/Connections.svelte
index 82238c793..292d22993 100644
--- a/src/lib/components/admin/Settings/Connections.svelte
+++ b/src/lib/components/admin/Settings/Connections.svelte
@@ -439,7 +439,7 @@
 
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/admin/Settings/Documents.svelte b/src/lib/components/admin/Settings/Documents.svelte
index 0a4177137..39e83badc 100644
--- a/src/lib/components/admin/Settings/Documents.svelte
+++ b/src/lib/components/admin/Settings/Documents.svelte
@@ -814,7 +814,7 @@
 	</div>
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/admin/Settings/General.svelte b/src/lib/components/admin/Settings/General.svelte
index 666414a16..b5d4e01e8 100644
--- a/src/lib/components/admin/Settings/General.svelte
+++ b/src/lib/components/admin/Settings/General.svelte
@@ -137,7 +137,7 @@
 
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/admin/Settings/Images.svelte b/src/lib/components/admin/Settings/Images.svelte
index ed9c118a0..4863577b2 100644
--- a/src/lib/components/admin/Settings/Images.svelte
+++ b/src/lib/components/admin/Settings/Images.svelte
@@ -648,7 +648,7 @@
 
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
 				? ' cursor-not-allowed'
 				: ''}"
 			type="submit"
diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 0f71a651f..a3dbec09d 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -361,7 +361,7 @@
 
 	<div class="flex justify-end text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/admin/Settings/Pipelines.svelte b/src/lib/components/admin/Settings/Pipelines.svelte
index 040dcc509..fb229d9ff 100644
--- a/src/lib/components/admin/Settings/Pipelines.svelte
+++ b/src/lib/components/admin/Settings/Pipelines.svelte
@@ -549,7 +549,7 @@
 	{#if PIPELINES_LIST !== null && PIPELINES_LIST.length > 0}
 		<div class="flex justify-end pt-3 text-sm font-medium">
 			<button
-				class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+				class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 				type="submit"
 			>
 				{$i18n.t('Save')}
diff --git a/src/lib/components/admin/Settings/Users.svelte b/src/lib/components/admin/Settings/Users.svelte
index cafae3f51..04f780759 100644
--- a/src/lib/components/admin/Settings/Users.svelte
+++ b/src/lib/components/admin/Settings/Users.svelte
@@ -205,7 +205,7 @@
 
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/admin/Settings/WebSearch.svelte b/src/lib/components/admin/Settings/WebSearch.svelte
index 0d36e205c..69f1f9104 100644
--- a/src/lib/components/admin/Settings/WebSearch.svelte
+++ b/src/lib/components/admin/Settings/WebSearch.svelte
@@ -310,7 +310,7 @@
 	</div>
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 043be67f9..a8cd2e53d 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -397,7 +397,7 @@
 
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			on:click={async () => {
 				const res = await submitHandler();
 
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 66fdac212..677cfa8e0 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -233,7 +233,7 @@
 
 	<div class="flex justify-end text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index d1aad383f..bff0ceb3e 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -323,7 +323,7 @@
 
 	<div class="flex justify-end pt-3 text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			on:click={() => {
 				saveSettings({
 					system: system !== '' ? system : undefined,
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index 93fb735ca..eb71dbde8 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -567,7 +567,7 @@
 
 	<div class="flex justify-end text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/chat/Settings/Personalization.svelte b/src/lib/components/chat/Settings/Personalization.svelte
index 28f110eb3..d728218c2 100644
--- a/src/lib/components/chat/Settings/Personalization.svelte
+++ b/src/lib/components/chat/Settings/Personalization.svelte
@@ -89,7 +89,7 @@
 
 	<div class="flex justify-end text-sm font-medium">
 		<button
-			class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 			type="submit"
 		>
 			{$i18n.t('Save')}
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 419a8034b..a2791c41d 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -88,15 +88,15 @@
 			</button>
 		</div>
 
-		<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
+		<div class="flex flex-col md:flex-row w-full px-4 pt-2 pb-4 md:space-x-4">
 			<div
 				id="settings-tabs-container"
 				class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
 			>
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+					class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'general'
-						? 'bg-gray-200 dark:bg-gray-800'
+						? 'bg-gray-100 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 					on:click={() => {
 						selectedTab = 'general';
@@ -120,9 +120,9 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+					class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'interface'
-						? 'bg-gray-200 dark:bg-gray-800'
+						? 'bg-gray-100 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 					on:click={() => {
 						selectedTab = 'interface';
@@ -146,9 +146,9 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+					class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'personalization'
-						? 'bg-gray-200 dark:bg-gray-800'
+						? 'bg-gray-100 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 					on:click={() => {
 						selectedTab = 'personalization';
@@ -161,9 +161,9 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+					class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'audio'
-						? 'bg-gray-200 dark:bg-gray-800'
+						? 'bg-gray-100 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 					on:click={() => {
 						selectedTab = 'audio';
@@ -188,9 +188,9 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+					class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'chats'
-						? 'bg-gray-200 dark:bg-gray-800'
+						? 'bg-gray-100 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 					on:click={() => {
 						selectedTab = 'chats';
@@ -214,9 +214,9 @@
 				</button>
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+					class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'account'
-						? 'bg-gray-200 dark:bg-gray-800'
+						? 'bg-gray-100 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 					on:click={() => {
 						selectedTab = 'account';
@@ -241,9 +241,9 @@
 
 				{#if $user.role === 'admin'}
 					<button
-						class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+						class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 						'admin'
-							? 'bg-gray-200 dark:bg-gray-800'
+							? 'bg-gray-100 dark:bg-gray-800'
 							: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 						on:click={async () => {
 							await goto('/admin/settings');
@@ -269,9 +269,9 @@
 				{/if}
 
 				<button
-					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+					class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 					'about'
-						? 'bg-gray-200 dark:bg-gray-800'
+						? 'bg-gray-100 dark:bg-gray-800'
 						: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
 					on:click={() => {
 						selectedTab = 'about';
diff --git a/src/lib/components/playground/Playground.svelte b/src/lib/components/playground/Playground.svelte
index d962bf939..4cdd8f05b 100644
--- a/src/lib/components/playground/Playground.svelte
+++ b/src/lib/components/playground/Playground.svelte
@@ -332,7 +332,7 @@
 			<div class="pb-3 flex justify-end">
 				{#if !loading}
 					<button
-						class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 						on:click={() => {
 							submitHandler();
 						}}
diff --git a/src/lib/components/workspace/Functions/FunctionEditor.svelte b/src/lib/components/workspace/Functions/FunctionEditor.svelte
index 8391e4309..ec65bae5d 100644
--- a/src/lib/components/workspace/Functions/FunctionEditor.svelte
+++ b/src/lib/components/workspace/Functions/FunctionEditor.svelte
@@ -386,7 +386,7 @@ class Pipe:
 					</div>
 
 					<button
-						class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 						type="submit"
 					>
 						{$i18n.t('Save')}
diff --git a/src/lib/components/workspace/Tools/ToolkitEditor.svelte b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
index 1a63e46c4..362501595 100644
--- a/src/lib/components/workspace/Tools/ToolkitEditor.svelte
+++ b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
@@ -274,7 +274,7 @@ class Tools:
 					</div>
 
 					<button
-						class="px-3 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
 						type="submit"
 					>
 						{$i18n.t('Save')}