From fb12b23e0169ba2cdcf454a27dcf814a2caf26b3 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 8 Jul 2026 15:56:31 +0200
Subject: [PATCH] fix: session preview editors and picker dropdown overflow
 (#10010)

* fix: constrain script/flow/raw-app editors to container height in session preview

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: clip session preview picker dropdown to popover so it stops overflowing the page

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/DrillPicker.svelte            | 2 +-
 frontend/src/lib/components/FlowBuilder.svelte            | 2 +-
 frontend/src/lib/components/ScriptBuilder.svelte          | 2 +-
 frontend/src/lib/components/raw_apps/RawAppEditor.svelte  | 5 +----
 frontend/src/routes/(root)/(logged)/sessions/+page.svelte | 3 +++
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/DrillPicker.svelte b/frontend/src/lib/components/DrillPicker.svelte
index 1b6a161d02..a03a0af39e 100644
--- a/frontend/src/lib/components/DrillPicker.svelte
+++ b/frontend/src/lib/components/DrillPicker.svelte
@@ -412,7 +412,7 @@ leaves and ignores the current scope.
 	bind:this={pickerRoot}
 	class={flush
 		? 'flex flex-col w-full h-full'
-		: 'flex flex-col w-[min(420px,calc(100vw-20px))] max-h-[60vh]'}
+		: 'flex flex-col w-[min(420px,calc(100vw-20px))] max-h-[60vh] min-h-0'}
 	onkeydown={handleSearchKeydown}
 	onmousemove={() => (mouseActive = true)}
 >
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 418b33b77f..f66d2e508b 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -1097,7 +1097,7 @@
 		<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 		<FlowEditorDrawer bind:this={$flowEditorDrawer} />
 
-		<div bind:this={flowBuilderRoot} class="flex flex-col h-screen">
+		<div bind:this={flowBuilderRoot} class="flex flex-col h-full">
 			<!-- Nav between steps-->
 			<div
 				bind:clientWidth={topbarWidth}
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 5b86f7dbad..7b12c02f51 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1897,7 +1897,7 @@
 		</DrawerContent>
 	</Drawer>
 
-	<div class="flex flex-col h-screen">
+	<div class="flex flex-col h-full">
 		<div bind:clientWidth={topbarWidth} class="flex h-12 items-center px-4">
 			<div class="flex gap-2 lg:gap-2 w-full items-center">
 				<div class="flex flex-row items-center gap-2 min-w-0 shrink">
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
index 9e6f508b59..10015a06ec 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditor.svelte
@@ -1643,10 +1643,7 @@
 	gateJobIds={false}
 	extraSourceWindow={() => externalPreviewWindow}
 />
-<div
-	bind:clientWidth={rootWidth}
-	class="max-h-screen overflow-hidden h-screen min-h-0 flex flex-col"
->
+<div bind:clientWidth={rootWidth} class="max-h-full overflow-hidden h-full min-h-0 flex flex-col">
 	<RawAppEditorHeader
 		bind:jobs
 		bind:jobsById
diff --git a/frontend/src/routes/(root)/(logged)/sessions/+page.svelte b/frontend/src/routes/(root)/(logged)/sessions/+page.svelte
index c9155f1d03..232f2fb003 100644
--- a/frontend/src/routes/(root)/(logged)/sessions/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/sessions/+page.svelte
@@ -655,6 +655,7 @@
 											enableFlyTransition
 											bind:isOpen={activeTabPickerOpen}
 											openFocus="[data-workspace-picker-search]"
+											contentClasses="flex flex-col overflow-hidden"
 											class="flex items-center shrink-0 cursor-pointer text-tertiary hover:text-primary"
 										>
 											{#snippet trigger()}
@@ -685,6 +686,7 @@
 										bind:isOpen={newTabOpen}
 										enableFlyTransition
 										openFocus="[data-workspace-picker-search]"
+										contentClasses="flex flex-col overflow-hidden"
 										class="shrink-0 inline-flex items-center justify-center w-6 h-6 rounded text-tertiary hover:text-primary hover:bg-surface-hover cursor-pointer"
 									>
 										{#snippet trigger()}
@@ -753,6 +755,7 @@
 											bind:isOpen={emptyStateNewTabOpen}
 											enableFlyTransition
 											openFocus="[data-workspace-picker-search]"
+											contentClasses="flex flex-col overflow-hidden"
 										>
 											{#snippet trigger()}
 												<span