From c870b2ea29aed52b9a45b46c560fbe2f55a33059 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 16 Sep 2025 15:57:20 -0500
Subject: [PATCH] refac: styling

---
 src/lib/components/admin/Evaluations.svelte   |  2 +-
 .../admin/Evaluations/Feedbacks.svelte        | 26 +++++++------------
 .../admin/Evaluations/Leaderboard.svelte      | 24 +++++++----------
 src/lib/components/admin/Settings.svelte      |  2 +-
 src/lib/components/admin/Users.svelte         |  2 +-
 .../components/admin/Users/UserList.svelte    |  4 +--
 6 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/lib/components/admin/Evaluations.svelte b/src/lib/components/admin/Evaluations.svelte
index 29bf899440..efd2ef6bb3 100644
--- a/src/lib/components/admin/Evaluations.svelte
+++ b/src/lib/components/admin/Evaluations.svelte
@@ -56,7 +56,7 @@
 	<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
 		<div
 			id="users-tabs-container"
-			class="tabs mx-[16px] lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
+			class="tabs mx-[16px] lg:mx-0 lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
 		>
 			<button
 				id="leaderboard"
diff --git a/src/lib/components/admin/Evaluations/Feedbacks.svelte b/src/lib/components/admin/Evaluations/Feedbacks.svelte
index 784d51e74a..97714b2971 100644
--- a/src/lib/components/admin/Evaluations/Feedbacks.svelte
+++ b/src/lib/components/admin/Evaluations/Feedbacks.svelte
@@ -169,7 +169,7 @@
 
 <FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} onClose={closeFeedbackModal} />
 
-<div class="mt-0.5 mb-2 gap-1 flex flex-row justify-between">
+<div class="mt-0.5 mb-1 gap-1 flex flex-row justify-between">
 	<div class="flex md:self-center text-lg font-medium px-0.5">
 		{$i18n.t('Feedback History')}
 
@@ -194,24 +194,18 @@
 	{/if}
 </div>
 
-<div
-	class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5"
->
+<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
 	{#if (feedbacks ?? []).length === 0}
 		<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1">
 			{$i18n.t('No feedbacks found')}
 		</div>
 	{:else}
-		<table
-			class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm"
-		>
-			<thead
-				class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
-			>
-				<tr class="">
+		<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
+			<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
+				<tr class=" border-b-2 border-gray-100 dark:border-gray-800">
 					<th
 						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none w-3"
+						class="px-2.5 py-2 cursor-pointer select-none w-3"
 						on:click={() => setSortKey('user')}
 					>
 						<div class="flex gap-1.5 items-center justify-end">
@@ -234,7 +228,7 @@
 
 					<th
 						scope="col"
-						class="px-3 pr-1.5 cursor-pointer select-none"
+						class="px-2.5 py-2 cursor-pointer select-none"
 						on:click={() => setSortKey('model_id')}
 					>
 						<div class="flex gap-1.5 items-center">
@@ -257,7 +251,7 @@
 
 					<th
 						scope="col"
-						class="px-3 py-1.5 text-right cursor-pointer select-none w-fit"
+						class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
 						on:click={() => setSortKey('rating')}
 					>
 						<div class="flex gap-1.5 items-center justify-end">
@@ -280,7 +274,7 @@
 
 					<th
 						scope="col"
-						class="px-3 py-1.5 text-right cursor-pointer select-none w-0"
+						class="px-2.5 py-2 text-right cursor-pointer select-none w-0"
 						on:click={() => setSortKey('updated_at')}
 					>
 						<div class="flex gap-1.5 items-center justify-end">
@@ -301,7 +295,7 @@
 						</div>
 					</th>
 
-					<th scope="col" class="px-3 py-1.5 text-right cursor-pointer select-none w-0"> </th>
+					<th scope="col" class="px-2.5 py-2 text-right cursor-pointer select-none w-0"> </th>
 				</tr>
 			</thead>
 			<tbody class="">
diff --git a/src/lib/components/admin/Evaluations/Leaderboard.svelte b/src/lib/components/admin/Evaluations/Leaderboard.svelte
index ce6c526638..96e5ba52cf 100644
--- a/src/lib/components/admin/Evaluations/Leaderboard.svelte
+++ b/src/lib/components/admin/Evaluations/Leaderboard.svelte
@@ -337,7 +337,7 @@
 />
 
 <div
-	class="pt-0.5 pb-2 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
+	class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
 >
 	<div class="flex md:self-center text-lg font-medium px-0.5 shrink-0 items-center">
 		<div class=" gap-1">
@@ -370,9 +370,7 @@
 	</div>
 </div>
 
-<div
-	class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5"
->
+<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm">
 	{#if loadingLeaderboard}
 		<div class=" absolute top-0 bottom-0 left-0 right-0 flex">
 			<div class="m-auto">
@@ -386,17 +384,15 @@
 		</div>
 	{:else}
 		<table
-			class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded {loadingLeaderboard
+			class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full {loadingLeaderboard
 				? 'opacity-20'
 				: ''}"
 		>
-			<thead
-				class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
-			>
-				<tr class="">
+			<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
+				<tr class=" border-b-2 border-gray-100 dark:border-gray-800">
 					<th
 						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none w-3"
+						class="px-2.5 py-2 cursor-pointer select-none w-3"
 						on:click={() => setSortKey('rating')}
 					>
 						<div class="flex gap-1.5 items-center">
@@ -418,7 +414,7 @@
 					</th>
 					<th
 						scope="col"
-						class="px-3 py-1.5 cursor-pointer select-none"
+						class="px-2.5 py-2 cursor-pointer select-none"
 						on:click={() => setSortKey('name')}
 					>
 						<div class="flex gap-1.5 items-center">
@@ -440,7 +436,7 @@
 					</th>
 					<th
 						scope="col"
-						class="px-3 py-1.5 text-right cursor-pointer select-none w-fit"
+						class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
 						on:click={() => setSortKey('rating')}
 					>
 						<div class="flex gap-1.5 items-center justify-end">
@@ -462,7 +458,7 @@
 					</th>
 					<th
 						scope="col"
-						class="px-3 py-1.5 text-right cursor-pointer select-none w-5"
+						class="px-2.5 py-2 text-right cursor-pointer select-none w-5"
 						on:click={() => setSortKey('won')}
 					>
 						<div class="flex gap-1.5 items-center justify-end">
@@ -484,7 +480,7 @@
 					</th>
 					<th
 						scope="col"
-						class="px-3 py-1.5 text-right cursor-pointer select-none w-5"
+						class="px-2.5 py-2 text-right cursor-pointer select-none w-5"
 						on:click={() => setSortKey('lost')}
 					>
 						<div class="flex gap-1.5 items-center justify-end">
diff --git a/src/lib/components/admin/Settings.svelte b/src/lib/components/admin/Settings.svelte
index 905ebe4684..9e2ec88853 100644
--- a/src/lib/components/admin/Settings.svelte
+++ b/src/lib/components/admin/Settings.svelte
@@ -83,7 +83,7 @@
 <div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
 	<div
 		id="admin-settings-tabs-container"
-		class="tabs mx-[16px] lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
+		class="tabs mx-[16px] lg:mx-0 lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
 	>
 		<button
 			id="general"
diff --git a/src/lib/components/admin/Users.svelte b/src/lib/components/admin/Users.svelte
index a97671394a..70e0301a18 100644
--- a/src/lib/components/admin/Users.svelte
+++ b/src/lib/components/admin/Users.svelte
@@ -58,7 +58,7 @@
 <div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
 	<div
 		id="users-tabs-container"
-		class="mx-[16px] lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
+		class="mx-[16px] lg:mx-0 lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
 	>
 		<button
 			id="overview"
diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
index a6451e235b..86e04020cf 100644
--- a/src/lib/components/admin/Users/UserList.svelte
+++ b/src/lib/components/admin/Users/UserList.svelte
@@ -220,9 +220,7 @@
 	</div>
 
 	<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
-		<table
-			class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm"
-		>
+		<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
 			<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
 				<tr class=" border-b-2 border-gray-100 dark:border-gray-800">
 					<th