From 59fc600b521f35b921e37e53b3fb76d38e62bd55 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 04:33:06 -0400
Subject: [PATCH] refac

---
 .../admin/Functions/FunctionEditor.svelte     | 20 ++++++++--------
 src/lib/components/chat/ChatControls.svelte   |  4 ++--
 .../workspace/Tools/ToolkitEditor.svelte      | 16 ++++++-------
 .../(app)/admin/functions/create/+page.svelte |  2 +-
 .../(app)/admin/functions/edit/+page.svelte   |  2 +-
 src/routes/(app)/calendar/+page.svelte        |  4 ++--
 .../(app)/workspace/tools/create/+page.svelte | 24 ++++++++++---------
 .../(app)/workspace/tools/edit/+page.svelte   | 24 ++++++++++---------
 8 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/admin/Functions/FunctionEditor.svelte b/src/lib/components/admin/Functions/FunctionEditor.svelte
index 76e021c6d2..6a3bc11917 100644
--- a/src/lib/components/admin/Functions/FunctionEditor.svelte
+++ b/src/lib/components/admin/Functions/FunctionEditor.svelte
@@ -333,11 +333,11 @@ class Pipe:
 	};
 </script>
 
-<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
-	<div class="mx-auto w-full md:px-0 h-full">
+<div class=" flex flex-col justify-between w-full min-w-0 overflow-y-auto overflow-x-hidden h-full">
+	<div class="mx-auto w-full min-w-0 md:px-0 h-full">
 		<form
 			bind:this={formElement}
-			class=" flex flex-col max-h-[100dvh] h-full"
+			class=" flex flex-col min-w-0 max-h-[100dvh] h-full"
 			on:submit|preventDefault={() => {
 				if (edit) {
 					submitHandler();
@@ -346,9 +346,9 @@ class Pipe:
 				}
 			}}
 		>
-			<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
+			<div class="flex flex-col flex-1 min-w-0 overflow-auto h-0 rounded-lg">
 				<div class="w-full mb-2 flex flex-col gap-0.5">
-					<div class="flex w-full items-center">
+					<div class="flex w-full min-w-0 items-center">
 						<div class=" shrink-0 mr-2">
 							<Tooltip content={$i18n.t('Back')}>
 								<button
@@ -363,10 +363,10 @@ class Pipe:
 							</Tooltip>
 						</div>
 
-						<div class="flex-1">
+						<div class="flex-1 min-w-0">
 							<Tooltip content={$i18n.t('e.g. My Filter')} placement="top-start">
 								<input
-									class="w-full text-2xl font-normal bg-transparent outline-hidden "
+									class="w-full text-2xl font-normal bg-transparent outline-hidden"
 									type="text"
 									placeholder={$i18n.t('Function Name')}
 									bind:value={name}
@@ -375,7 +375,7 @@ class Pipe:
 							</Tooltip>
 						</div>
 
-						<div class="flex items-center gap-2">
+						<div class="flex shrink-0 items-center gap-2">
 							{#if !edit}
 								<select
 									class="text-xs bg-transparent border border-gray-100 dark:border-gray-800 rounded-lg px-2 py-1 outline-hidden"
@@ -391,7 +391,7 @@ class Pipe:
 						</div>
 					</div>
 
-					<div class=" flex gap-2 px-1 items-center">
+					<div class=" flex min-w-0 gap-2 px-1 items-center">
 						{#if edit}
 							<div class="text-sm text-gray-500 shrink-0">
 								{id}
@@ -425,7 +425,7 @@ class Pipe:
 					</div>
 				</div>
 
-				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
+				<div class="mb-2 flex-1 min-w-0 overflow-auto h-0 rounded-lg">
 					<CodeEditor
 						bind:this={codeEditor}
 						value={content}
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 4956dd789d..8d2a05bcca 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -340,7 +340,7 @@
 								{/if}
 							</div>
 							<button
-								class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
+								class="p-1 rounded-lg text-gray-500 dark:text-gray-400"
 								on:click={() => showControls.set(false)}
 								aria-label={$i18n.t('Close')}
 							>
@@ -485,7 +485,7 @@
 									{/if}
 								</div>
 								<button
-									class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition text-gray-500 dark:text-gray-400"
+									class="p-1 rounded-lg text-gray-500 dark:text-gray-400"
 									on:click={() => showControls.set(false)}
 									aria-label={$i18n.t('Close')}
 								>
diff --git a/src/lib/components/workspace/Tools/ToolkitEditor.svelte b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
index b1d34de0f6..04b7714925 100644
--- a/src/lib/components/workspace/Tools/ToolkitEditor.svelte
+++ b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
@@ -207,11 +207,11 @@ class Tools:
 	}}
 />
 
-<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
-	<div class="mx-auto w-full md:px-0 h-full">
+<div class=" flex flex-col justify-between w-full min-w-0 overflow-y-auto overflow-x-hidden h-full">
+	<div class="mx-auto w-full min-w-0 md:px-0 h-full">
 		<form
 			bind:this={formElement}
-			class=" flex flex-col max-h-[100dvh] h-full"
+			class=" flex flex-col min-w-0 max-h-[100dvh] h-full"
 			on:submit|preventDefault={() => {
 				if (edit) {
 					submitHandler();
@@ -220,9 +220,9 @@ class Tools:
 				}
 			}}
 		>
-			<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
+			<div class="flex flex-col flex-1 min-w-0 overflow-auto h-0 rounded-lg">
 				<div class="w-full mb-2 flex flex-col gap-0.5">
-					<div class="flex w-full items-center">
+					<div class="flex w-full min-w-0 items-center">
 						<div class=" shrink-0 mr-2">
 							<Tooltip content={$i18n.t('Back')}>
 								<button
@@ -238,7 +238,7 @@ class Tools:
 							</Tooltip>
 						</div>
 
-						<div class="flex-1">
+						<div class="flex-1 min-w-0">
 							<Tooltip content={$i18n.t('e.g. My Tools')} placement="top-start">
 								<input
 									class="w-full text-2xl bg-transparent outline-hidden"
@@ -268,7 +268,7 @@ class Tools:
 						</div>
 					</div>
 
-					<div class=" flex gap-2 px-1 items-center">
+					<div class=" flex min-w-0 gap-2 px-1 items-center">
 						{#if edit}
 							<div class="text-sm text-gray-500 shrink-0">
 								{id}
@@ -304,7 +304,7 @@ class Tools:
 					</div>
 				</div>
 
-				<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
+				<div class="mb-2 flex-1 min-w-0 overflow-auto h-0 rounded-lg">
 					<CodeEditor
 						bind:this={codeEditor}
 						value={content}
diff --git a/src/routes/(app)/admin/functions/create/+page.svelte b/src/routes/(app)/admin/functions/create/+page.svelte
index bcb6be7326..0629caecc1 100644
--- a/src/routes/(app)/admin/functions/create/+page.svelte
+++ b/src/routes/(app)/admin/functions/create/+page.svelte
@@ -96,7 +96,7 @@
 
 {#if mounted}
 	{#key func?.content}
-		<div class="px-[16px] h-full">
+		<div class="px-[16px] h-full min-w-0 overflow-x-hidden">
 			<FunctionEditor
 				id={func?.id ?? ''}
 				name={func?.name ?? ''}
diff --git a/src/routes/(app)/admin/functions/edit/+page.svelte b/src/routes/(app)/admin/functions/edit/+page.svelte
index 9926d1477d..bd6fae3503 100644
--- a/src/routes/(app)/admin/functions/edit/+page.svelte
+++ b/src/routes/(app)/admin/functions/edit/+page.svelte
@@ -81,7 +81,7 @@
 </script>
 
 {#if func}
-	<div class="px-[16px] h-full">
+	<div class="px-[16px] h-full min-w-0 overflow-x-hidden">
 		<FunctionEditor
 			edit={true}
 			id={func.id}
diff --git a/src/routes/(app)/calendar/+page.svelte b/src/routes/(app)/calendar/+page.svelte
index 6442896f83..8c1dd36007 100644
--- a/src/routes/(app)/calendar/+page.svelte
+++ b/src/routes/(app)/calendar/+page.svelte
@@ -308,8 +308,8 @@
 								{ value: 'month', label: $i18n.t('Month') }
 							]}
 							onChange={() => handleNavigate()}
-							triggerClass="relative flex items-center gap-1.5 px-3 py-1.5 bg-gray-50 dark:bg-gray-850 rounded-xl text-xs"
-							contentClass="rounded-2xl w-40 p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
+							triggerClass="relative flex items-center gap-1 px-2 py-1 rounded-lg text-xs text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:hover:bg-gray-850 dark:hover:text-white"
+							contentClass="rounded-xl w-28 p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
 							align="end"
 						>
 							<svelte:fragment slot="trigger" let:selectedLabel>
diff --git a/src/routes/(app)/workspace/tools/create/+page.svelte b/src/routes/(app)/workspace/tools/create/+page.svelte
index e0baedcdde..e315ab68df 100644
--- a/src/routes/(app)/workspace/tools/create/+page.svelte
+++ b/src/routes/(app)/workspace/tools/create/+page.svelte
@@ -82,16 +82,18 @@
 
 {#if mounted}
 	{#key tool?.content}
-		<ToolkitEditor
-			id={tool?.id ?? ''}
-			name={tool?.name ?? ''}
-			meta={tool?.meta ?? { description: '' }}
-			content={tool?.content ?? ''}
-			accessGrants={tool?.access_grants !== undefined ? tool.access_grants : []}
-			{clone}
-			onSave={(value) => {
-				saveHandler(value);
-			}}
-		/>
+		<div class="h-full min-w-0 overflow-x-hidden">
+			<ToolkitEditor
+				id={tool?.id ?? ''}
+				name={tool?.name ?? ''}
+				meta={tool?.meta ?? { description: '' }}
+				content={tool?.content ?? ''}
+				accessGrants={tool?.access_grants !== undefined ? tool.access_grants : []}
+				{clone}
+				onSave={(value) => {
+					saveHandler(value);
+				}}
+			/>
+		</div>
 	{/key}
 {/if}
diff --git a/src/routes/(app)/workspace/tools/edit/+page.svelte b/src/routes/(app)/workspace/tools/edit/+page.svelte
index 14df72c1cf..57893ecd48 100644
--- a/src/routes/(app)/workspace/tools/edit/+page.svelte
+++ b/src/routes/(app)/workspace/tools/edit/+page.svelte
@@ -77,17 +77,19 @@
 </script>
 
 {#if tool}
-	<ToolkitEditor
-		edit={true}
-		id={tool.id}
-		name={tool.name}
-		meta={tool.meta}
-		content={tool.content}
-		accessGrants={tool.access_grants ?? []}
-		onSave={(value) => {
-			saveHandler(value);
-		}}
-	/>
+	<div class="h-full min-w-0 overflow-x-hidden">
+		<ToolkitEditor
+			edit={true}
+			id={tool.id}
+			name={tool.name}
+			meta={tool.meta}
+			content={tool.content}
+			accessGrants={tool.access_grants ?? []}
+			onSave={(value) => {
+				saveHandler(value);
+			}}
+		/>
+	</div>
 {:else}
 	<div class="flex items-center justify-center h-full">
 		<div class=" pb-16">