From 12f0ad28bf0017de9a9ac1a1adcd8c4e4907622a Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 24 Mar 2026 05:48:43 -0500
Subject: [PATCH] refac

---
 src/lib/components/chat/ChatControls.svelte   |  4 +--
 src/lib/components/chat/FileNav.svelte        |  5 ++--
 .../chat/FileNav/PortPreview.svelte           | 26 ++++++++++++-------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/chat/ChatControls.svelte b/src/lib/components/chat/ChatControls.svelte
index d531449e7..f27a307fe 100644
--- a/src/lib/components/chat/ChatControls.svelte
+++ b/src/lib/components/chat/ChatControls.svelte
@@ -291,7 +291,7 @@
 					<!-- Controls + Files tabs -->
 					<div class="flex flex-col h-full min-h-0">
 						<!-- Tab bar -->
-						<div class="flex items-center justify-between px-2 pt-2.5 pb-2 shrink-0">
+						<div class="flex items-center justify-between px-2 pt-2 pb-2 shrink-0">
 							<div class="flex gap-1 min-w-0 overflow-x-auto scrollbar-hidden">
 								{#if showControlsTab}
 									<button
@@ -437,7 +437,7 @@
 						<!-- Controls + Files tabs -->
 						<div class="flex flex-col h-full min-h-0">
 							<!-- Tab bar -->
-							<div class="flex items-center justify-between px-2 pt-2.5 pb-2 shrink-0">
+							<div class="flex items-center justify-between px-2 pt-2 pb-2 shrink-0">
 								<div class="flex gap-1 min-w-0 overflow-x-auto scrollbar-hidden">
 									{#if showControlsTab}
 										<button
diff --git a/src/lib/components/chat/FileNav.svelte b/src/lib/components/chat/FileNav.svelte
index a754307c6..2b123b81f 100644
--- a/src/lib/components/chat/FileNav.svelte
+++ b/src/lib/components/chat/FileNav.svelte
@@ -1151,6 +1151,7 @@
 				<PortPreview
 					baseUrl={selectedTerminal?.url ?? ''}
 					port={previewPort}
+					overlay={overlay || isDraggingHandle}
 					onClose={() => {
 						previewPort = null;
 					}}
@@ -1183,7 +1184,7 @@
 					}}
 					baseUrl={selectedTerminal?.url ?? ''}
 					apiKey={selectedTerminal?.key ?? ''}
-					{overlay}
+					overlay={overlay || isDraggingHandle}
 					onSave={async (content) => {
 						const terminal = selectedTerminal;
 						if (!terminal || !selectedFile) return;
@@ -1364,7 +1365,7 @@
 				{#if terminalExpanded}
 					<div style="height: {terminalHeight}px" class="min-h-0">
 						<XTerminal
-							{overlay}
+							overlay={overlay || isDraggingHandle}
 							bind:connected={terminalConnected}
 							bind:connecting={terminalConnecting}
 						/>
diff --git a/src/lib/components/chat/FileNav/PortPreview.svelte b/src/lib/components/chat/FileNav/PortPreview.svelte
index 0e74e9dbf..fdefb2d49 100644
--- a/src/lib/components/chat/FileNav/PortPreview.svelte
+++ b/src/lib/components/chat/FileNav/PortPreview.svelte
@@ -9,6 +9,7 @@
 	export let port: number;
 	export let path: string = '';
 	export let onClose: () => void = () => {};
+	export let overlay = false;
 
 	let iframeEl: HTMLIFrameElement;
 	let urlInput: string = '';
@@ -257,16 +258,21 @@
 	{/if}
 
 	<!-- Iframe -->
-	{#key iframeKey}
-		<iframe
-			bind:this={iframeEl}
-			src={proxyUrl}
-			title="Port {port} preview"
-			class="flex-1 w-full min-h-0 border-0 bg-white"
-			sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads"
-			on:load={onIframeLoad}
-		/>
-	{/key}
+	<div class="flex-1 min-h-0 relative">
+		{#if overlay}
+			<div class="absolute inset-0 z-10"></div>
+		{/if}
+		{#key iframeKey}
+			<iframe
+				bind:this={iframeEl}
+				src={proxyUrl}
+				title="Port {port} preview"
+				class="w-full h-full border-0 bg-white"
+				sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-downloads"
+				on:load={onIframeLoad}
+			/>
+		{/key}
+	</div>
 </div>
 
 <style>