From c4486b4a775aac7efe689fb78383d72a5fdb45f8 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 13 Jan 2025 21:13:16 -0800
Subject: [PATCH] refac: styling

---
 src/app.css                                 |  4 ++++
 src/lib/components/channel/Channel.svelte   |  2 +-
 src/lib/components/chat/ChatControls.svelte |  2 +-
 src/lib/components/common/Drawer.svelte     |  7 +++++--
 src/lib/components/layout/Sidebar.svelte    | 11 ++++++++++-
 src/routes/(app)/workspace/+layout.svelte   |  2 +-
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index be6195fdd..e78d68d83 100644
--- a/src/app.css
+++ b/src/app.css
@@ -77,6 +77,10 @@ math {
 	-webkit-app-region: no-drag;
 }
 
+.no-drag-region {
+	-webkit-app-region: no-drag;
+}
+
 iframe {
 	@apply rounded-lg;
 }
diff --git a/src/lib/components/channel/Channel.svelte b/src/lib/components/channel/Channel.svelte
index c975e3213..103283e71 100644
--- a/src/lib/components/channel/Channel.svelte
+++ b/src/lib/components/channel/Channel.svelte
@@ -266,7 +266,7 @@
 						threadId = null;
 					}}
 				>
-					<div class=" {threadId !== null ? ' h-screen  w-screen' : 'px-6 py-4'} h-full">
+					<div class=" {threadId !== null ? ' h-screen  w-full' : 'px-6 py-4'} h-full">
 						<Thread
 							{threadId}
 							{channel}
diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index 5b0135105..654db03d4 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -146,7 +146,7 @@
 			>
 				<div
 					class=" {$showCallOverlay || $showOverview || $showArtifacts
-						? ' h-screen  w-screen'
+						? ' h-screen  w-full'
 						: 'px-6 py-4'} h-full"
 				>
 					{#if $showCallOverlay}
diff --git a/src/lib/components/common/Drawer.svelte b/src/lib/components/common/Drawer.svelte
index 89166e4c6..d4a950670 100644
--- a/src/lib/components/common/Drawer.svelte
+++ b/src/lib/components/common/Drawer.svelte
@@ -2,6 +2,7 @@
 	import { onDestroy, onMount, createEventDispatcher } from 'svelte';
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { fade, fly, slide } from 'svelte/transition';
+	import { isApp } from '$lib/stores';
 
 	const dispatch = createEventDispatcher();
 
@@ -57,14 +58,16 @@
 
 <div
 	bind:this={modalElement}
-	class="modal fixed right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[999] overflow-hidden overscroll-contain"
+	class="modal fixed right-0 {$isApp
+		? ' ml-[4.5rem] max-w-[calc(100%-4.5rem)]'
+		: ''} left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[999] overflow-hidden overscroll-contain"
 	in:fly={{ y: 100, duration: 100 }}
 	on:mousedown={() => {
 		show = false;
 	}}
 >
 	<div
-		class=" mt-auto max-w-full w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} max-h-[100dvh] overflow-y-auto scrollbar-hidden"
+		class=" mt-auto w-full bg-gray-50 dark:bg-gray-900 dark:text-gray-100 {className} max-h-[100dvh] overflow-y-auto scrollbar-hidden"
 		on:mousedown={(e) => {
 			e.stopPropagation();
 		}}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 7709311c9..887cbcc6c 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -358,6 +358,15 @@
 		showSidebar.set(!$mobile ? localStorage.sidebar === 'true' : false);
 		showSidebar.subscribe((value) => {
 			localStorage.sidebar = value;
+
+			// nav element is not available on the first render
+			const navElement = document.getElementsByTagName('nav')[0];
+
+			if (!value) {
+				navElement.style['-webkit-app-region'] = 'drag';
+			} else {
+				navElement.style['-webkit-app-region'] = 'no-drag';
+			}
 		});
 
 		await initChannels();
@@ -479,7 +488,7 @@
 
 			<a
 				id="sidebar-new-chat-button"
-				class="flex justify-between items-center flex-1 rounded-lg px-2 py-1 h-full text-right hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+				class="flex justify-between items-center flex-1 rounded-lg px-2 py-1 h-full text-right hover:bg-gray-100 dark:hover:bg-gray-900 transition no-drag-region"
 				href="/"
 				draggable="false"
 				on:click={async () => {
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index e5100466f..0240e693c 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -57,7 +57,7 @@
 	>
 		<nav class="   px-2.5 pt-1 backdrop-blur-xl drag-region">
 			<div class=" flex items-center gap-1">
-				<div class="{$showSidebar ? 'md:hidden' : ''} self-end flex flex-none items-center">
+				<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 					<button
 						id="sidebar-toggle-button"
 						class="cursor-pointer p-1.5 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"