From fee4c280f8015f89b7ce5bda7d8d4e41b2365f3b Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 03:22:29 -0400
Subject: [PATCH] refac

---
 src/routes/(app)/playground/+layout.svelte | 18 ++++++++++--------
 src/routes/(app)/workspace/+layout.svelte  | 20 ++++++++++----------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index f3b3a294c7..c51d6c26cb 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/src/routes/(app)/playground/+layout.svelte
@@ -15,12 +15,12 @@
 </svelte:head>
 
 <div
-	class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
+	class="flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
 		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ''} max-w-full"
 >
-	<nav class="   px-1.5 pt-0.5 backdrop-blur-xl drag-region select-none">
-		<div class=" flex items-center gap-0.5 md:gap-1">
+	<nav class="pb-1 px-2.5 pt-2 backdrop-blur-xl drag-region select-none">
+		<div class="flex items-center gap-0.5 md:gap-1">
 			{#if $mobile}
 				<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 					<Tooltip
@@ -43,13 +43,15 @@
 				</div>
 			{/if}
 
-			<div class="">
+			<div class="flex w-full items-center">
 				<div
-					class="flex gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
+					class="flex min-w-0 items-center gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
 				>
 					<a
 						draggable="false"
-						class="min-w-fit p-1.5 {['/playground', '/playground/'].includes($page.url.pathname)
+						class="min-w-fit px-1 text-sm {['/playground', '/playground/'].includes(
+							$page.url.pathname
+						)
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 						href="/playground">{$i18n.t('Chat')}</a
@@ -64,7 +66,7 @@
 
 					<a
 						draggable="false"
-						class="min-w-fit p-1.5 {$page.url.pathname.includes('/playground/completions')
+						class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/playground/completions')
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 						href="/playground/completions">{$i18n.t('Completions')}</a
@@ -72,7 +74,7 @@
 
 					<a
 						draggable="false"
-						class="min-w-fit p-1.5 {$page.url.pathname.includes('/playground/images')
+						class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/playground/images')
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 						href="/playground/images">{$i18n.t('Images')}</a
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 141299386d..96719b3bf1 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -56,12 +56,12 @@
 
 {#if loaded}
 	<div
-		class=" relative flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
+		class="flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
 			? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 			: ''} max-w-full"
 	>
-		<nav class="   px-1.5 pt-0.5 backdrop-blur-xl drag-region select-none">
-			<div class=" flex items-center gap-0.5 md:gap-1">
+		<nav class="pb-1 px-2.5 pt-2 backdrop-blur-xl drag-region select-none">
+			<div class="flex items-center gap-0.5 md:gap-1">
 				{#if $mobile}
 					<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 						<Tooltip
@@ -84,15 +84,15 @@
 					</div>
 				{/if}
 
-				<div class="">
+				<div class="flex w-full items-center">
 					<div
-						class="flex gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
+						class="flex min-w-0 items-center gap-0.5 md:gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
 					>
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models}
 							<a
 								draggable="false"
 								aria-current={$page.url.pathname.includes('/workspace/models') ? 'page' : null}
-								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/models')
+								class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/models')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 								href="/workspace/models">{$i18n.t('Models')}</a
@@ -103,7 +103,7 @@
 							<a
 								draggable="false"
 								aria-current={$page.url.pathname.includes('/workspace/knowledge') ? 'page' : null}
-								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/knowledge')
+								class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/knowledge')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 								href="/workspace/knowledge"
@@ -116,7 +116,7 @@
 							<a
 								draggable="false"
 								aria-current={$page.url.pathname.includes('/workspace/prompts') ? 'page' : null}
-								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/prompts')
+								class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/prompts')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 								href="/workspace/prompts">{$i18n.t('Prompts')}</a
@@ -127,7 +127,7 @@
 							<a
 								draggable="false"
 								aria-current={$page.url.pathname.includes('/workspace/skills') ? 'page' : null}
-								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/skills')
+								class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/skills')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 								href="/workspace/skills"
@@ -140,7 +140,7 @@
 							<a
 								draggable="false"
 								aria-current={$page.url.pathname.includes('/workspace/tools') ? 'page' : null}
-								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/tools')
+								class="min-w-fit px-1 text-sm {$page.url.pathname.includes('/workspace/tools')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
 								href="/workspace/tools"