refac: styling

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;
 }

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}

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}

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();
 		}}

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 () => {

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"