refac: admin panel styling

src/lib/components/layout/Sidebar.svelte

@@ -33,7 +33,7 @@
 	import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
 	import UserMenu from './Sidebar/UserMenu.svelte';
 
-	const BREAKPOINT = 1024;
+	const BREAKPOINT = 768;
 
 	let show = false;
 	let navElement;
@@ -274,7 +274,7 @@
 		</div>
 
 		{#if $user?.role === 'admin'}
-			<div class="px-1.5 flex justify-center">
+			<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 					href="/workspace"

src/lib/components/workspace/Documents.svelte

@@ -151,6 +151,12 @@
 	);
 </script>
 
+<svelte:head>
+	<title>
+		{$i18n.t('Documents')} | {$WEBUI_NAME}
+	</title>
+</svelte:head>
+
 {#if dragged}
 	<div
 		class="fixed w-full h-full flex z-50 touch-none pointer-events-none"

src/routes/(app)/workspace/+page.svelte

@@ -90,12 +90,12 @@
 </svelte:head>
 
 <div class=" flex flex-col w-full min-h-screen">
-	<div class=" px-4 pt-3 mb-1.5">
-		<div class=" flex items-center">
+	<div class=" px-4 pt-3 mb-2">
+		<div class=" flex items-center gap-1">
 			<div class="{$showSidebar ? 'md:hidden' : ''} mr-1 self-start flex flex-none items-center">
 				<button
 					id="sidebar-toggle-button"
-					class="cursor-pointer p-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+					class="cursor-pointer p-1 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
 					on:click={() => {
 						showSidebar.set(!$showSidebar);
 					}}
@@ -120,7 +120,7 @@
 				type="button"
 				on:click={() => {
 					tab = '';
-				}}>Modelfiles</button
+				}}>{$i18n.t('Modelfiles')}</button
 			>
 
 			<button
@@ -130,7 +130,7 @@
 				type="button"
 				on:click={() => {
 					tab = 'prompts';
-				}}>Prompts</button
+				}}>{$i18n.t('Prompts')}</button
 			>
 
 			<button
@@ -140,8 +140,10 @@
 				type="button"
 				on:click={() => {
 					tab = 'documents';
-				}}>Documents</button
+				}}
 			>
+				{$i18n.t('Documents')}
+			</button>
 
 			<button
 				class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
@@ -150,7 +152,7 @@
 				type="button"
 				on:click={() => {
 					tab = 'playground';
-				}}>Playground</button
+				}}>{$i18n.t('Playground')}</button
 			>
 		</div>
 	</div>

src/routes/+layout.svelte

@@ -18,7 +18,7 @@
 	setContext('i18n', i18n);
 
 	let loaded = false;
-	const BREAKPOINT = 1024;
+	const BREAKPOINT = 768;
 
 	onMount(async () => {
 		theme.set(localStorage.theme);