fix(frontend): fix minor issues in the UI (#6382)

* fix flow result overflow * fix resource type misalignment and icon sizes * Do not display resource type description if empty * Display flow yaml editor full height * fix detail page overflow * nit
2025-08-13 18:19:32 +01:00
parent ce76b16d0c
commit cb2cef48ff
8 changed files with 77 additions and 52 deletions
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -40,6 +40,7 @@
 	import { toJsonStr } from '$lib/utils'
 	import { userStore } from '$lib/stores'
 	import ResultStreamDisplay from './ResultStreamDisplay.svelte'
+	import { twMerge } from 'tailwind-merge'

 	const IMG_MAX_SIZE = 10000000
 	const TABLE_MAX_SIZE = 5000000
@@ -95,6 +96,7 @@
 		fixTableSizingToParent?: boolean
 		copilot_fix?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		growVertical?: boolean
 	}

 	let {
@@ -118,7 +120,8 @@
 		fixTableSizingToParent = false,
 		copilot_fix,
 		children,
-		loading = false
+		loading = false,
+		growVertical = false
 	}: Props = $props()
 	let enableHtml = $state(false)
 	let s3FileDisplayRawMode = $state(false)
@@ -540,11 +543,11 @@
 	<div class="text-red-400">Non displayable object</div>
 {:else}
 	<div
-		class="inline-highlight relative grow flex flex-col h-full {['plain', 'markdown'].includes(
-			resultKind ?? ''
-		)
-			? ''
-			: 'min-h-[160px]'}"
+		class={twMerge(
+			'inline-highlight relative grow flex flex-col',
+			['plain', 'markdown'].includes(resultKind ?? '') ? 'min-h-0' : 'min-h-[160px]',
+			growVertical ? '' : 'h-full'
+		)}
 	>
 		{#if result != undefined && length != undefined && largeObject != undefined}
 			<div class="flex justify-between items-center w-full">
--- a/frontend/src/lib/components/FlowJobResult.svelte
+++ b/frontend/src/lib/components/FlowJobResult.svelte
@@ -108,7 +108,7 @@
 	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
 		{#if result !== undefined || result_stream !== undefined}
-			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} />
+			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} growVertical />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}
--- a/frontend/src/lib/components/IconedResourceType.svelte
+++ b/frontend/src/lib/components/IconedResourceType.svelte
@@ -32,16 +32,18 @@
 				: APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
 			: undefined
 	)
+
+	let widthInPixels = $derived(parseInt(width))
 </script>

-<div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
+<div class="truncate flex flex-row gap-2 items-center {center ? 'justify-center ' : ''} -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
 	{#if iconComponent}
 		{@const SvelteComponent = iconComponent}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
-			<SvelteComponent {height} {width} />
+			<SvelteComponent {height} {width} size={widthInPixels} />
 		</span>
 	{:else if formatExtension}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -21,6 +21,7 @@
 	import GfmMarkdown from './GfmMarkdown.svelte'
 	import TestTriggerConnection from './triggers/TestTriggerConnection.svelte'
 	import GitHubAppIntegration from './GitHubAppIntegration.svelte'
+	import Button from './common/button/Button.svelte'

 	interface Props {
 		canSave?: boolean
@@ -223,10 +224,14 @@
 		<h4 class="mt-4 inline-flex items-center gap-4"
 			>Resource description <Required required={false} />
 			{#if can_write}
-				<div class="flex gap-1 items-center">
-					<Toggle size="xs" bind:checked={editDescription} />
-					<Pen size={14} />
-				</div>
+				<Button
+					size="xs2"
+					variant="contained"
+					color="light"
+					btnClasses={editDescription ? 'bg-surface-hover' : ''}
+					startIcon={{ icon: Pen }}
+					on:click={() => (editDescription = !editDescription)}
+				/>
 			{/if}</h4
 		>
 		{#if can_write && editDescription}
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -121,7 +121,8 @@
 		class: className = '',
 		loadAsync = false,
 		key,
-		disabled = false
+		disabled = false,
+		minHeight = 1000
 	}: {
 		lang: string
 		code?: string
@@ -147,6 +148,7 @@
 		initialCursorPos?: IPosition
 		key?: string
 		disabled?: boolean
+		minHeight?: number
 	} = $props()

 	const dispatch = createEventDispatcher()
@@ -435,7 +437,7 @@
 		if (autoHeight) {
 			const updateHeight = () => {
 				if (!editor) return
-				const contentHeight = Math.min(1000, editor.getContentHeight())
+				const contentHeight = Math.min(minHeight, editor.getContentHeight())
 				if (divEl) {
 					divEl.style.height = `${contentHeight}px`
 				}
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Tabs, Tab, TabContent } from '$lib/components/common'
-	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import DetailPageDetailPanel from './DetailPageDetailPanel.svelte'

@@ -40,9 +39,9 @@

 <main class="h-screen w-full" bind:clientWidth>
 	{#if clientWidth >= 768}
-		<div class="h-full w-full">
+		<div class="h-full w-full flex flex-col">
 			{@render header?.()}
-			<SplitPanesWrapper>
+			<div class="grow min-h-0 w-full">
 				<Splitpanes>
 					<Pane size={65} minSize={50}>
 						{@render form?.()}
@@ -64,41 +63,43 @@
 						</DetailPageDetailPanel>
 					</Pane>
 				</Splitpanes>
-			</SplitPanesWrapper>
+			</div>
 		</div>
 	{:else}
-		<div class="h-full w-full">
+		<div class="h-full w-full flex flex-col">
 			{@render header?.()}
-			<Tabs bind:selected={mobileTab}>
-				<Tab value="form">Run form</Tab>
-				<Tab value="saved_inputs">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}
+			<div class="grow min-h-0 w-full flex flex-col">
+				<Tabs bind:selected={mobileTab} wrapperClass="flex-none">
+					<Tab value="form">Run form</Tab>
+					<Tab value="saved_inputs">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}

-				{#snippet content()}
-					<div class="h-full">
-						<TabContent value="form" class="flex flex-col flex-1 h-full">
-							{@render form?.()}
-						</TabContent>
+					{#snippet content()}
+						<div class="grow min-h-0">
+							<TabContent value="form" class="flex flex-col flex-1 h-full">
+								{@render form?.()}
+							</TabContent>

-						<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
-							{@render save_inputs?.()}
-						</TabContent>
-						<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
-							{@render triggers?.()}
-						</TabContent>
-						<TabContent value="script" class="flex flex-col flex-1 h-full">
-							{@render script?.()}
-						</TabContent>
-					</div>
-				{/snippet}
-			</Tabs>
+							<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
+								{@render save_inputs?.()}
+							</TabContent>
+							<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
+								{@render triggers?.()}
+							</TabContent>
+							<TabContent value="script" class="flex flex-col flex-1 h-full">
+								{@render script?.()}
+							</TabContent>
+						</div>
+					{/snippet}
+				</Tabs>
+			</div>
 		</div>
 	{/if}
 </main>
--- a/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
+++ b/frontend/src/lib/components/flows/header/FlowYamlEditor.svelte
@@ -58,6 +58,8 @@
 			sendUserToast('Error parsing yaml: ' + e), true
 		}
 	}
+
+	let editorHeight = $state(0)
 </script>

 <Drawer on:open={reload} bind:this={drawer} size="800px">
@@ -71,7 +73,15 @@
 			{#await import('../../SimpleEditor.svelte')}
 				<Loader2 class="animate-spin" />
 			{:then Module}
-				<Module.default bind:this={editor} autoHeight bind:code lang="yaml" />
+				<div class="h-full w-full overflow-hidden" bind:clientHeight={editorHeight}>
+					<Module.default
+						bind:this={editor}
+						autoHeight
+						minHeight={editorHeight}
+						bind:code
+						lang="yaml"
+					/>
+				</div>
 			{/await}
 		{/if}
 	</DrawerContent>
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -480,9 +480,11 @@
 					formatExtension={resourceTypeViewerObj.formatExtension}
 				/></h1
 			>
-			<div class="py-2 box prose mb-8 text-secondary">
-				<GfmMarkdown md={resourceTypeViewerObj.description ?? ''} />
-			</div>
+			{#if resourceTypeViewerObj.description}
+				<div class="py-2 box prose mb-8 text-secondary">
+					<GfmMarkdown md={resourceTypeViewerObj.description ?? ''} />
+				</div>
+			{/if}
 			{#if resourceTypeViewerObj.formatExtension}
 				<Alert
 					type="info"