From f795a65276bbc26728f6ba2ae0699fef6d18b1f1 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 29 Oct 2024 12:23:56 +0100
Subject: [PATCH] fix(frontend): make script and schema scrollable on script
 detail page

---
 .../lib/components/FlowGraphViewerStep.svelte |  6 +-
 .../details/DetailPageDetailPanel.svelte      | 80 +++++++++----------
 .../details/DetailPageLayout.svelte           | 44 +++++-----
 .../scripts/get/[...hash]/+page.svelte        |  6 +-
 4 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte
index b2b7b9d381..fe235c6455 100644
--- a/frontend/src/lib/components/FlowGraphViewerStep.svelte
+++ b/frontend/src/lib/components/FlowGraphViewerStep.svelte
@@ -133,8 +133,10 @@
 						Error handler
 					{:else if stepDetail.id === 'preprocessor'}
 						Preprocessor
-					{:else}
-						Anonymous step
+					{:else if stepDetail.value.type == 'rawscript'}
+						Inline {stepDetail.value.language} script
+					{:else if stepDetail.value.type == 'script'}
+						Workspace script
 					{/if}
 				</span>
 			</div>
diff --git a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
index 4d56fba8f3..84180d2d5e 100644
--- a/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
+++ b/frontend/src/lib/components/details/DetailPageDetailPanel.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Tabs, Tab, TabContent } from '$lib/components/common'
 
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import HighlightTheme from '../HighlightTheme.svelte'
 	import FlowViewerInner from '../FlowViewerInner.svelte'
 	import DetailPageTriggerPanel from './DetailPageTriggerPanel.svelte'
@@ -22,51 +21,48 @@
 
 <HighlightTheme />
 
-<Splitpanes horizontal class="h-full">
-	<Pane size={100}>
-		<Tabs bind:selected>
-			<Tab value="saved_inputs">Saved Inputs</Tab>
-			{#if !isOperator}
-				<Tab value="triggers">Triggers</Tab>
-			{/if}
-			{#if flow_json}
-				<Tab value="raw">Export</Tab>
-			{:else}
-				<Tab value="script">Script</Tab>
-			{/if}
-			{#if selected == 'flow_step'}
-				<Tab value="flow_step">Step</Tab>
-			{/if}
+<Tabs bind:selected>
+	<Tab value="saved_inputs">Saved Inputs</Tab>
+	{#if !isOperator}
+		<Tab value="triggers">Triggers</Tab>
+	{/if}
+	{#if flow_json}
+		<Tab value="raw">Export</Tab>
+	{:else}
+		<Tab value="script">Script</Tab>
+	{/if}
+	{#if selected == 'flow_step'}
+		<Tab value="flow_step">Step</Tab>
+	{/if}
 
-			<svelte:fragment slot="content">
-				<div class="overflow-hidden" style="height:calc(100% - 32px);">
-					<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
-						<slot name="save_inputs" />
-					</TabContent>
-					<TabContent value="schema" class="flex flex-col flex-1 h-full">
-						<slot name="schema" />
-					</TabContent>
-					<TabContent value="script" class="flex flex-col flex-1 h-full">
-						<slot name="script" />
-					</TabContent>
-					<TabContent value="triggers" class="flex flex-col flex-1 h-full pt-2">
-						<DetailPageTriggerPanel bind:triggerSelected>
-							<slot slot="webhooks" name="webhooks" />
-							<slot slot="routes" name="routes" />
-							<slot slot="websockets" name="websockets" />
-							<slot slot="emails" name="emails" />
-							<slot slot="schedules" name="schedules" />
-							<slot slot="cli" name="cli" />
-						</DetailPageTriggerPanel>
-					</TabContent>
+	<svelte:fragment slot="content">
+		<div class="h-[calc(100%-32px)]">
+			<div class="h-full overflow-auto">
+				<TabContent value="saved_inputs" class="h-full">
+					<slot name="save_inputs" />
+				</TabContent>
+				<TabContent value="script" class="h-full">
+					<slot name="script" />
+				</TabContent>
+				<TabContent value="triggers" class="h-full pt-2">
+					<DetailPageTriggerPanel bind:triggerSelected>
+						<slot slot="webhooks" name="webhooks" />
+						<slot slot="routes" name="routes" />
+						<slot slot="websockets" name="websockets" />
+						<slot slot="emails" name="emails" />
+						<slot slot="schedules" name="schedules" />
+						<slot slot="cli" name="cli" />
+					</DetailPageTriggerPanel>
+				</TabContent>
+				{#if flow_json}
 					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
 						<FlowViewerInner flow={flow_json} />
 					</TabContent>
 					<TabContent value="flow_step" class="flex flex-col flex-1 h-full">
 						<slot name="flow_step" />
 					</TabContent>
-				</div>
-			</svelte:fragment>
-		</Tabs>
-	</Pane>
-</Splitpanes>
+				{/if}
+			</div>
+		</div>
+	</svelte:fragment>
+</Tabs>
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index ec0a5bda16..f3c58daf54 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -61,7 +61,7 @@
 			</SplitPanesWrapper>
 		</div>
 	{:else}
-		<div class="h-full">
+		<div class="h-full w-full">
 			<slot name="header" />
 			<Tabs bind:selected={mobileTab}>
 				<Tab value="form">Run form</Tab>
@@ -74,27 +74,29 @@
 				{/if}
 
 				<svelte:fragment slot="content">
-					<TabContent value="form" class="flex flex-col flex-1 h-full">
-						<slot name="form" />
-					</TabContent>
+					<div class="h-full">
+						<TabContent value="form" class="flex flex-col flex-1 h-full">
+							<slot name="form" />
+						</TabContent>
 
-					<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
-						<slot name="save_inputs" />
-					</TabContent>
-					<TabContent value="triggers" class="flex flex-col flex-1 h-full">
-						<DetailPageTriggerPanel bind:triggerSelected={$selectedTriggerStore}>
-							<slot slot="webhooks" name="webhooks" />
-							<slot slot="routes" name="routes" />
-							<slot slot="script" name="script" />
-							<slot slot="websockets" name="websockets" />
-							<slot slot="emails" name="emails" />
-							<slot slot="schedules" name="schedules" />
-							<slot slot="cli" name="cli" />
-						</DetailPageTriggerPanel>
-					</TabContent>
-					<TabContent value="script" class="flex flex-col flex-1 h-full">
-						<slot name="script" />
-					</TabContent>
+						<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
+							<slot name="save_inputs" />
+						</TabContent>
+						<TabContent value="triggers" class="flex flex-col flex-1 h-full">
+							<DetailPageTriggerPanel bind:triggerSelected={$selectedTriggerStore}>
+								<slot slot="webhooks" name="webhooks" />
+								<slot slot="routes" name="routes" />
+								<slot slot="script" name="script" />
+								<slot slot="websockets" name="websockets" />
+								<slot slot="emails" name="emails" />
+								<slot slot="schedules" name="schedules" />
+								<slot slot="cli" name="cli" />
+							</DetailPageTriggerPanel>
+						</TabContent>
+						<TabContent value="script" class="flex flex-col flex-1 h-full">
+							<slot name="script" />
+						</TabContent>
+					</div>
 				</svelte:fragment>
 			</Tabs>
 		</div>
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index 66641c18d3..a0523d77d1 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -742,7 +742,7 @@
 				</div>
 			</svelte:fragment>
 			<svelte:fragment slot="script">
-				<div>
+				<div class="h-full">
 					<Skeleton {loading} layout={[[20]]} />
 
 					<Tabs selected="code">
@@ -751,7 +751,7 @@
 						<Tab value="schema" size="xs">Schema</Tab>
 						<svelte:fragment slot="content">
 							<TabContent value="code">
-								<div class="p-2 w-full overflow-auto">
+								<div class="p-2 w-full">
 									<HighlightCode
 										language={script.language}
 										code={script.content}
@@ -785,7 +785,7 @@
 								</div>
 							</TabContent>
 							<TabContent value="schema">
-								<div class="p-1 relative">
+								<div class="p-1 relative h-full">
 									<button
 										on:click={() => copyToClipboard(JSON.stringify(script?.schema, null, 4))}
 										class="absolute top-2 right-2"