From 622767d72473c39869111f278192ff3b1c94785c Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 15 Jul 2026 02:49:46 -0400
Subject: [PATCH] refac

---
 .../automations/AutomationEditor.svelte       | 22 ++++++-
 src/lib/components/channel/Navbar.svelte      |  2 +-
 src/lib/components/chat/Messages/Error.svelte | 61 ++++++++++++-------
 src/lib/components/chat/Navbar.svelte         |  2 +-
 .../components/common/DropdownOptions.svelte  |  6 +-
 src/lib/components/icons/Sidebar.svelte       | 20 ++----
 src/lib/components/layout/SearchModal.svelte  | 23 +++----
 src/lib/components/layout/Sidebar.svelte      |  4 +-
 src/lib/components/notes/NoteEditor.svelte    | 34 +++++------
 src/lib/components/notes/Notes.svelte         | 54 ++++++++--------
 src/lib/components/workspace/Models.svelte    | 30 +++++----
 src/routes/(app)/admin/+layout.svelte         | 13 ++--
 src/routes/(app)/automations/+page.svelte     | 52 ++++++++--------
 src/routes/(app)/calendar/+page.svelte        |  4 +-
 src/routes/(app)/home/+layout.svelte          |  4 +-
 src/routes/(app)/playground/+layout.svelte    | 19 +++---
 src/routes/(app)/workspace/+layout.svelte     |  6 +-
 17 files changed, 192 insertions(+), 164 deletions(-)

diff --git a/src/lib/components/automations/AutomationEditor.svelte b/src/lib/components/automations/AutomationEditor.svelte
index 463cb0fa70..dd01662345 100644
--- a/src/lib/components/automations/AutomationEditor.svelte
+++ b/src/lib/components/automations/AutomationEditor.svelte
@@ -7,7 +7,7 @@
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
 
-	import { WEBUI_NAME, showSidebar } from '$lib/stores';
+	import { WEBUI_NAME, mobile, showSidebar } from '$lib/stores';
 
 	import {
 		updateAutomationById,
@@ -25,6 +25,7 @@
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
+	import SidebarIcon from '$lib/components/icons/Sidebar.svelte';
 
 	import ScheduleDropdown from '$lib/components/automations/ScheduleDropdown.svelte';
 	import ModelDropdown from '$lib/components/automations/ModelDropdown.svelte';
@@ -222,7 +223,24 @@
 		<!-- Header Segment (Shrink-0 so it doesn't compress) -->
 		<div class="flex items-start justify-between gap-4 shrink-0 mb-0.5">
 			<div class="flex-1 min-w-0">
-				<div class="flex items-center gap-1.5 mb-1.5">
+				<div class="flex items-center gap-0.5 md:gap-1.5 mb-1.5">
+					{#if $mobile}
+						<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
+							<button
+								id="sidebar-toggle-button"
+								class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+								aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+								on:click={() => {
+									showSidebar.set(!$showSidebar);
+								}}
+								type="button"
+							>
+								<div class="self-center p-1.5">
+									<SidebarIcon className="size-4" />
+								</div>
+							</button>
+						</Tooltip>
+					{/if}
 					<Tooltip content={$i18n.t('Back')}>
 						<button
 							class="text-sm p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg transition"
diff --git a/src/lib/components/channel/Navbar.svelte b/src/lib/components/channel/Navbar.svelte
index 65e645d463..bab642d801 100644
--- a/src/lib/components/channel/Navbar.svelte
+++ b/src/lib/components/channel/Navbar.svelte
@@ -78,7 +78,7 @@
 							}}
 						>
 							<div class=" self-center p-1.5">
-								<Sidebar />
+								<Sidebar className="size-4" />
 							</div>
 						</button>
 					</Tooltip>
diff --git a/src/lib/components/chat/Messages/Error.svelte b/src/lib/components/chat/Messages/Error.svelte
index 2c046485c2..700157b82f 100644
--- a/src/lib/components/chat/Messages/Error.svelte
+++ b/src/lib/components/chat/Messages/Error.svelte
@@ -1,29 +1,48 @@
 <script lang="ts">
 	import Info from '$lib/components/icons/Info.svelte';
 
-	export let content = '';
+	export let content: unknown = '';
+
+	const getErrorMessage = (value: unknown): string => {
+		if (typeof value === 'string') {
+			return value;
+		}
+
+		if (typeof value === 'object' && value !== null) {
+			const error = 'error' in value ? value.error : null;
+
+			if (
+				typeof error === 'object' &&
+				error !== null &&
+				'message' in error &&
+				typeof error.message === 'string'
+			) {
+				return error.message;
+			}
+
+			if ('detail' in value && typeof value.detail === 'string') {
+				return value.detail;
+			}
+
+			if ('message' in value && typeof value.message === 'string') {
+				return value.message;
+			}
+
+			return JSON.stringify(value) ?? String(value);
+		}
+
+		return JSON.stringify(value) ?? String(value);
+	};
+
+	$: message = getErrorMessage(content) || 'Error submitting message';
 </script>
 
-<div class="flex my-2 gap-2.5 border px-4 py-3 border-red-600/10 bg-red-600/10 rounded-lg">
-	<div class=" self-start mt-0.5">
-		<Info className="size-5 text-red-700 dark:text-red-400" />
-	</div>
+<div
+	class="my-2 flex w-full items-center gap-3 rounded-3xl bg-gray-100 px-4 py-3 text-gray-800 dark:bg-gray-800 dark:text-gray-100"
+>
+	<Info className="size-5 shrink-0" strokeWidth="2" />
 
-	<div class=" self-center text-sm">
-		{#if typeof content === 'string'}
-			{content}
-		{:else if typeof content === 'object' && content !== null}
-			{#if content?.error && content?.error?.message}
-				{content.error.message}
-			{:else if content?.detail}
-				{content.detail}
-			{:else if content?.message}
-				{content.message}
-			{:else}
-				{JSON.stringify(content)}
-			{/if}
-		{:else}
-			{JSON.stringify(content)}
-		{/if}
+	<div class="min-w-0 self-center break-words text-sm">
+		{message}
 	</div>
 </div>
diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index 75e064d22a..ee2a00052c 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -104,7 +104,7 @@
 								aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 							>
 								<div class="self-center p-1.5">
-									<Sidebar />
+									<Sidebar className="size-4" />
 								</div>
 							</button>
 						</Tooltip>
diff --git a/src/lib/components/common/DropdownOptions.svelte b/src/lib/components/common/DropdownOptions.svelte
index 19eadf1395..c7ca7ba745 100644
--- a/src/lib/components/common/DropdownOptions.svelte
+++ b/src/lib/components/common/DropdownOptions.svelte
@@ -37,11 +37,13 @@
 	}}
 >
 	<svelte:fragment slot="trigger" let:selectedLabel>
-		{selectedLabel}
+		<span class="min-w-0 truncate">{selectedLabel}</span>
 		<ChevronDown className=" size-3" strokeWidth="2.5" />
 	</svelte:fragment>
 
 	<svelte:fragment slot="item" let:item let:selected>
-		<span class={selected ? '' : 'text-gray-500 dark:text-gray-400'}>{item.label}</span>
+		<span class={`min-w-0 truncate ${selected ? '' : 'text-gray-500 dark:text-gray-400'}`}
+			>{item.label}</span
+		>
 	</svelte:fragment>
 </Select>
diff --git a/src/lib/components/icons/Sidebar.svelte b/src/lib/components/icons/Sidebar.svelte
index e158cf3cf4..b17649b731 100644
--- a/src/lib/components/icons/Sidebar.svelte
+++ b/src/lib/components/icons/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let className = 'size-5';
+	export let className = 'size-4';
 	export let strokeWidth = '1.5';
 </script>
 
@@ -10,18 +10,10 @@
 	viewBox="0 0 24 24"
 	stroke-width={strokeWidth}
 	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
 	class={className}
-	><rect
-		x="3"
-		y="3"
-		width="18"
-		height="18"
-		rx="5"
-		ry="5"
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		fill="none"
-	></rect><path d="M9.5 21V3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-	></path></svg
+	><path
+		d="M19 21L5 21C3.89543 21 3 20.1046 3 19L3 5C3 3.89543 3.89543 3 5 3L19 3C20.1046 3 21 3.89543 21 5L21 19C21 20.1046 20.1046 21 19 21Z"
+	></path><path d="M9.5 21V3"></path><path d="M5.5 10L7.25 12L5.5 14"></path></svg
 >
diff --git a/src/lib/components/layout/SearchModal.svelte b/src/lib/components/layout/SearchModal.svelte
index 9b61c639c0..19de4fc93a 100644
--- a/src/lib/components/layout/SearchModal.svelte
+++ b/src/lib/components/layout/SearchModal.svelte
@@ -24,12 +24,7 @@
 	import Loader from '../common/Loader.svelte';
 	import { createMessagesList } from '$lib/utils';
 	import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
-	import {
-		config,
-		user,
-		chatId as currentChatId,
-		tags
-	} from '$lib/stores';
+	import { config, user, chatId as currentChatId, tags } from '$lib/stores';
 	import { refreshChatList } from '$lib/stores/chat-list';
 	import Messages from '../chat/Messages.svelte';
 	import { goto } from '$app/navigation';
@@ -561,8 +556,6 @@
 					messages = null;
 				}}
 				onKeydown={(e) => {
-					console.log('e', e);
-
 					if (e.code === 'Enter' && (chatList ?? []).length > 0) {
 						const item = document.querySelector(`[data-arrow-selected="true"]`);
 						if (item) {
@@ -585,8 +578,6 @@
 			/>
 		</div>
 
-		<!-- <hr class="border-gray-50 dark:border-gray-850/30 my-1" /> -->
-
 		<div class="flex px-3.5 pb-0.5">
 			<div
 				class="flex flex-col overflow-y-auto h-96 md:h-[40rem] max-h-full scrollbar-hidden w-full flex-1 pr-2"
@@ -597,12 +588,12 @@
 
 				{#each actions as action, idx (action.label)}
 					<button
-						class=" w-full flex items-center rounded-xl text-sm py-1.5 px-2.5 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedIdx ===
+						class="w-full flex items-center rounded-lg text-sm py-1.5 px-2.5 hover:bg-gray-50/70 dark:hover:bg-gray-850/50 {selectedIdx ===
 						idx
-							? 'bg-gray-50 dark:bg-gray-850'
+							? 'bg-gray-50/70 dark:bg-gray-850/50'
 							: ''}"
 						data-arrow-selected={selectedIdx === idx ? 'true' : undefined}
-						dragabble="false"
+						draggable="false"
 						on:mouseenter={() => {
 							selectedIdx = idx;
 						}}
@@ -622,7 +613,7 @@
 				{/each}
 
 				{#if chatList}
-					<hr class="border-gray-50 dark:border-gray-850/30 my-3" />
+					<div aria-hidden="true" class="h-px my-3" />
 
 					{#if chatList.length === 0}
 						<div class="text-xs text-gray-500 dark:text-gray-400 text-center px-5 py-4">
@@ -661,9 +652,9 @@
 
 						<!-- svelte-ignore a11y-no-static-element-interactions -->
 						<div
-							class="w-full flex justify-between items-center rounded-xl text-sm py-1.5 pl-2.5 pr-32 hover:bg-gray-50 dark:hover:bg-gray-850 group/item relative {selectedIdx ===
+							class="w-full flex justify-between items-center rounded-lg text-sm py-1.5 pl-2.5 pr-32 hover:bg-gray-50/70 dark:hover:bg-gray-850/50 group/item relative {selectedIdx ===
 							idx + actions.length
-								? 'bg-gray-50 dark:bg-gray-850'
+								? 'bg-gray-50/70 dark:bg-gray-850/50'
 								: ''}"
 							data-arrow-selected={selectedIdx === idx + actions.length ? 'true' : undefined}
 							on:mouseenter={() => {
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 3c813e3a4b..a13aea514f 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -821,7 +821,7 @@
 								alt=""
 							/>
 
-							<Sidebar className="size-4.5 hidden group-hover:flex" />
+							<Sidebar className="size-4 hidden group-hover:flex" />
 						</div>
 					</button>
 				</Tooltip>
@@ -1054,7 +1054,7 @@
 						aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 					>
 						<div class=" self-center">
-							<Sidebar className="size-4.5" />
+							<Sidebar className="size-4" />
 						</div>
 					</button>
 				</Tooltip>
diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index b9f4de015d..e873aabf4f 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -924,27 +924,23 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 					<div class="shrink-0 w-full flex justify-between items-center px-3.5 mb-1.5">
 						<div class="w-full min-w-0 flex items-center">
 							{#if $mobile}
-								<div
-									class="{$showSidebar
-										? 'md:hidden pl-0.5'
-										: ''} flex flex-none items-center pr-1 -translate-x-1"
+								<Tooltip
+									content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 								>
-									<Tooltip
-										content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+									<button
+										id="sidebar-toggle-button"
+										class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
+										aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+										type="button"
+										on:click={() => {
+											showSidebar.set(!$showSidebar);
+										}}
 									>
-										<button
-											id="sidebar-toggle-button"
-											class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
-											on:click={() => {
-												showSidebar.set(!$showSidebar);
-											}}
-										>
-											<div class=" self-center p-1.5">
-												<Sidebar />
-											</div>
-										</button>
-									</Tooltip>
-								</div>
+										<div class=" self-center p-1.5">
+											<Sidebar className="size-4" />
+										</div>
+									</button>
+								</Tooltip>
 							{/if}
 
 							<input
diff --git a/src/lib/components/notes/Notes.svelte b/src/lib/components/notes/Notes.svelte
index 56c959791e..494e94e95d 100644
--- a/src/lib/components/notes/Notes.svelte
+++ b/src/lib/components/notes/Notes.svelte
@@ -339,37 +339,39 @@
 			</div>
 		</DeleteConfirmDialog>
 
-		<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
-			<div class="flex justify-between items-center">
-				<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
-					{#if $mobile}
-						<Tooltip content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}>
-							<button
-								id="sidebar-toggle-button"
-								class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
-								on:click={() => {
-									showSidebar.set(!$showSidebar);
-								}}
-							>
-								<div class="self-center p-1.5">
-									<SidebarIcon />
-								</div>
-							</button>
-						</Tooltip>
-					{/if}
+		<div class="flex items-center gap-0.5 md:gap-1 mb-2">
+			{#if $mobile}
+				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
+					<Tooltip
+						content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+						interactive={true}
+					>
+						<button
+							id="sidebar-toggle-button"
+							class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+							on:click={() => {
+								showSidebar.set(!$showSidebar);
+							}}
+						>
+							<div class="self-center p-1.5">
+								<SidebarIcon className="size-4" />
+							</div>
+						</button>
+					</Tooltip>
+				</div>
+			{/if}
 
-					<div>
-						{$i18n.t('Notes')}
-					</div>
-
-					<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+			<div class="flex w-full items-center">
+				<div class="flex items-center gap-1 py-1 min-w-0">
+					<span class="min-w-fit px-1 text-sm select-none">{$i18n.t('Notes')}</span>
+					<span class="text-xs text-gray-500 dark:text-gray-500">
 						{total ?? ''}
-					</div>
+					</span>
 				</div>
 
-				<div class="flex w-full justify-end gap-1.5">
+				<div class="ml-auto flex items-center gap-1">
 					<button
-						class=" px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
+						class="ml-1 px-2 py-1.5 text-xs gap-1 rounded-xl bg-black text-white dark:bg-white dark:text-black transition flex items-center"
 						on:click={async () => {
 							const res = await createNoteHandler(dayjs().format('YYYY-MM-DD'));
 
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index ba05f88573..8f58910550 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -556,10 +556,10 @@
 				<Dropdown align="end">
 					<Tooltip content={$i18n.t('Actions')}>
 						<button
-							class="flex h-8 items-center gap-1.5 rounded-xl bg-transparent px-1.5 text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
+							class="flex h-8 min-w-0 max-w-28 items-center gap-1.5 rounded-xl bg-transparent px-1.5 text-[13px] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
 							type="button"
 						>
-							<span>{$i18n.t('Actions')}</span>
+							<span class="min-w-0 truncate">{$i18n.t('Actions')}</span>
 							<ChevronDown className="size-3" strokeWidth="2.5" />
 						</button>
 					</Tooltip>
@@ -634,7 +634,7 @@
 								}
 							}}
 						>
-							<div class="flex group/item gap-3.5 w-full">
+							<div class="flex group/item min-w-0 gap-3.5 w-full">
 								<div class="self-center pl-0.5">
 									<div class="flex bg-white rounded-2xl">
 										<div
@@ -658,18 +658,22 @@
 
 								<div class=" shrink-0 flex w-full min-w-0 flex-1 pr-1 self-center">
 									<div class="flex h-full w-full flex-1 flex-col justify-start self-center group">
-										<div class="flex-1 w-full">
-											<div class="flex items-center justify-between w-full">
-												<Tooltip content={model.name} className=" w-fit" placement="top-start">
+										<div class="min-w-0 flex-1 w-full">
+											<div class="flex min-w-0 items-center justify-between w-full gap-2">
+												<Tooltip
+													content={model.name}
+													className="min-w-0 flex-1"
+													placement="top-start"
+												>
 													<a
-														class=" font-normal line-clamp-1 hover:underline capitalize"
+														class="font-normal line-clamp-1 hover:underline capitalize"
 														href={`/?models=${encodeURIComponent(model.id)}`}
 													>
 														{model.name}
 													</a>
 												</Tooltip>
 
-												<div class="flex items-center gap-1">
+												<div class="flex shrink-0 items-center gap-1">
 													{#if !model.write_access}
 														<div>
 															<Badge type="muted" content={$i18n.t('Read Only')} />
@@ -786,7 +790,7 @@
 												</div>
 											</div>
 
-											<div class=" flex gap-1 pr-2 -mt-1 items-center">
+											<div class="flex min-w-0 gap-1 pr-2 -mt-1 items-center">
 												<Tooltip
 													content={model?.user?.email ?? $i18n.t('Deleted User')}
 													className="flex shrink-0"
@@ -801,15 +805,15 @@
 													</div>
 												</Tooltip>
 
-												<div>·</div>
+												<div class="shrink-0">·</div>
 
 												<Tooltip
 													content={marked.parse(model?.meta?.description ?? model.id)}
-													className=" w-fit text-left"
+													className="min-w-0 text-left"
 													placement="top-start"
 												>
-													<div class="flex gap-1 text-xs overflow-hidden">
-														<div class="line-clamp-1">
+													<div class="flex min-w-0 gap-1 text-xs overflow-hidden">
+														<div class="line-clamp-1 min-w-0">
 															{#if (model?.meta?.description ?? '').trim()}
 																{model?.meta?.description}
 															{:else}
diff --git a/src/routes/(app)/admin/+layout.svelte b/src/routes/(app)/admin/+layout.svelte
index 2c04ffd242..11dd7471a9 100644
--- a/src/routes/(app)/admin/+layout.svelte
+++ b/src/routes/(app)/admin/+layout.svelte
@@ -35,12 +35,12 @@
 	<div
 		class=" flex flex-col h-screen max-h-[100dvh] flex-1 transition-width duration-200 ease-in-out {$showSidebar
 			? 'md:max-w-[calc(100%-var(--sidebar-width))]'
-			: ''}  w-full max-w-full"
+			: 'md:max-w-[calc(100%-42px)]'}  w-full max-w-full"
 	>
 		<nav class="  px-1.5 pt-0.5 backdrop-blur-xl drag-region select-none">
-			<div class=" flex items-center gap-1">
+			<div class=" flex items-center gap-0.5 md:gap-1">
 				{#if $mobile}
-					<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
+					<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 						<Tooltip
 							content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 							interactive={true}
@@ -48,21 +48,22 @@
 							<button
 								id="sidebar-toggle-button"
 								class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
+								aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 								on:click={() => {
 									showSidebar.set(!$showSidebar);
 								}}
 							>
 								<div class=" self-center p-1.5">
-									<Sidebar />
+									<Sidebar className="size-4" />
 								</div>
 							</button>
 						</Tooltip>
 					</div>
 				{/if}
 
-				<div class=" flex w-full">
+				<div class="">
 					<div
-						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent pt-1"
+						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"
 					>
 						<a
 							draggable="false"
diff --git a/src/routes/(app)/automations/+page.svelte b/src/routes/(app)/automations/+page.svelte
index 917ebaddb0..597311ecb5 100644
--- a/src/routes/(app)/automations/+page.svelte
+++ b/src/routes/(app)/automations/+page.svelte
@@ -260,35 +260,39 @@
 	<div class="flex-1 max-h-full overflow-y-auto">
 		{#if loaded}
 			<div class="pb-1 px-3 md:px-[18px] pt-2">
-				<div class="flex flex-col gap-1 px-1 mt-1.5 mb-2">
-					<div class="flex justify-between items-center">
-						<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
-							{#if $mobile}
-								<Tooltip
-									content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+				<div class="flex items-center gap-0.5 md:gap-1 mb-2">
+					{#if $mobile}
+						<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
+							<Tooltip
+								content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+								interactive={true}
+							>
+								<button
+									id="sidebar-toggle-button"
+									class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+									on:click={() => {
+										showSidebar.set(!$showSidebar);
+									}}
 								>
-									<button
-										id="sidebar-toggle-button"
-										class="cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition"
-										on:click={() => {
-											showSidebar.set(!$showSidebar);
-										}}
-									>
-										<div class="self-center p-1.5">
-											<SidebarIcon />
-										</div>
-									</button>
-								</Tooltip>
-							{/if}
-							<div>{$i18n.t('Automations')}</div>
-							<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
+									<div class="self-center p-1.5">
+										<SidebarIcon className="size-4" />
+									</div>
+								</button>
+							</Tooltip>
+						</div>
+					{/if}
+
+					<div class="flex w-full items-center">
+						<div class="flex items-center gap-1 py-1 min-w-0">
+							<span class="min-w-fit px-1 text-sm select-none">{$i18n.t('Automations')}</span>
+							<span class="text-xs text-gray-500 dark:text-gray-500">
 								{total ?? ''}
-							</div>
+							</span>
 						</div>
 
-						<div class="flex w-full justify-end gap-1.5">
+						<div class="ml-auto flex items-center gap-1">
 							<button
-								class="px-2 py-1.5 rounded-xl bg-black text-white dark:bg-white dark:text-black transition font-normal text-sm flex items-center"
+								class="ml-1 px-2 py-1.5 text-xs gap-1 rounded-xl bg-black text-white dark:bg-white dark:text-black transition flex items-center"
 								on:click={() => {
 									cloneFrom = null;
 									showCreateModal = true;
diff --git a/src/routes/(app)/calendar/+page.svelte b/src/routes/(app)/calendar/+page.svelte
index 5aa94c73cd..49cb783c8a 100644
--- a/src/routes/(app)/calendar/+page.svelte
+++ b/src/routes/(app)/calendar/+page.svelte
@@ -230,7 +230,7 @@
 	{#if loaded}
 		<!-- Top Navbar — spans above sidebar and calendar -->
 		<nav class="px-3 pt-2 pb-2 backdrop-blur-xl drag-region select-none shrink-0">
-			<div class="flex items-center gap-1">
+			<div class="flex items-center gap-0.5 md:gap-1">
 				{#if $mobile}
 					<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
 						<Tooltip
@@ -243,7 +243,7 @@
 								on:click={() => showSidebar.set(!$showSidebar)}
 							>
 								<div class="self-center p-1.5">
-									<SidebarIcon />
+									<SidebarIcon className="size-4" />
 								</div>
 							</button>
 						</Tooltip>
diff --git a/src/routes/(app)/home/+layout.svelte b/src/routes/(app)/home/+layout.svelte
index 62e3754d6f..74c6d116fb 100644
--- a/src/routes/(app)/home/+layout.svelte
+++ b/src/routes/(app)/home/+layout.svelte
@@ -37,7 +37,7 @@
 							}}
 						>
 							<div class=" self-center p-1.5">
-								<Sidebar />
+								<Sidebar className="size-4" />
 							</div>
 						</button>
 					</Tooltip>
@@ -46,7 +46,7 @@
 
 			<div class=" flex w-full">
 				<div
-					class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent pt-1"
+					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 pt-1"
 				>
 					<a
 						class="min-w-fit p-1.5 {$page.url.pathname.includes('/home/notes')
diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index c11ff08f88..f3b3a294c7 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/src/routes/(app)/playground/+layout.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { onMount, getContext } from 'svelte';
-	import { WEBUI_NAME, showSidebar, functions, mobile } from '$lib/stores';
+	import { getContext } from 'svelte';
+	import { WEBUI_NAME, showSidebar, mobile } from '$lib/stores';
 	import { page } from '$app/stores';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Sidebar from '$lib/components/icons/Sidebar.svelte';
 
 	const i18n = getContext('i18n');
-
-	onMount(async () => {});
 </script>
 
 <svelte:head>
@@ -21,10 +19,10 @@
 		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
 		: ''} max-w-full"
 >
-	<nav class="   px-2.5 backdrop-blur-xl w-full drag-region select-none">
-		<div class=" flex items-center">
+	<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">
 			{#if $mobile}
-				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center self-end">
+				<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 					<Tooltip
 						content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 						interactive={true}
@@ -32,21 +30,22 @@
 						<button
 							id="sidebar-toggle-button"
 							class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
+							aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 							on:click={() => {
 								showSidebar.set(!$showSidebar);
 							}}
 						>
 							<div class=" self-center p-1.5">
-								<Sidebar />
+								<Sidebar className="size-4" />
 							</div>
 						</button>
 					</Tooltip>
 				</div>
 			{/if}
 
-			<div class=" flex w-full">
+			<div class="">
 				<div
-					class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent pt-1"
+					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"
 				>
 					<a
 						draggable="false"
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index 93ec6f9bbd..141299386d 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -61,7 +61,7 @@
 			: ''} max-w-full"
 	>
 		<nav class="   px-1.5 pt-0.5 backdrop-blur-xl drag-region select-none">
-			<div class=" flex items-center gap-1">
+			<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
@@ -77,7 +77,7 @@
 								}}
 							>
 								<div class=" self-center p-1.5">
-									<Sidebar />
+									<Sidebar className="size-4" />
 								</div>
 							</button>
 						</Tooltip>
@@ -86,7 +86,7 @@
 
 				<div class="">
 					<div
-						class="flex 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 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