fix: improve rendering of list with undefined heights

This commit is contained in:
Ruben Fiszel
2023-11-01 17:54:00 +01:00
parent b4d5c5add8
commit 9eec2e2c3e
6 changed files with 16 additions and 14 deletions
@@ -162,9 +162,13 @@
} max-height: ${resolvedConfig.heightPx}px;`
: ''}
class={inRange
? `${$allIdsInPath.includes(id) ? 'overflow-visible' : 'overflow-auto'} ${
!isCard ? 'w-full' : resolvedConfig?.displayBorders ? 'border' : ''
}`
? `${
$allIdsInPath.includes(id)
? 'overflow-visible'
: resolvedConfig.heightPx
? 'overflow-auto'
: ''
} ${!isCard ? 'w-full' : resolvedConfig?.displayBorders ? 'border' : ''}`
: 'h-0 float overflow-hidden invisible absolute'}
>
<ListWrapper
@@ -40,6 +40,7 @@
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
on:click={() => {
if ($copilotCurrentStepStore !== undefined) return
@@ -50,6 +51,7 @@
}
}}
class={classNames(
'z-10',
$copilotCurrentStepStore !== undefined ? 'border-gray-500/75' : 'cursor-pointer',
'border transition-colors duration-[400ms] ease-linear mx-auto rounded-sm px-2 py-1 bg-surface text-sm flex justify-between items-center flex-row overflow-x-hidden relative',
$selectedId?.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
@@ -286,7 +286,7 @@
/>
</div>
<div
class="z-10 absolute w-full inline-flex flex-col gap-2 bottom-0 left-0 flex-initial p-2 items-center border-b"
class="absolute w-full inline-flex text-sm flex-col gap-2 bottom-0 left-0 flex-initial p-2 items-center border-b"
>
<FlowErrorHandlerItem />
</div>
@@ -61,7 +61,7 @@
{#if mod}
{#if insertable}
<div
class="{openMenu ? 'z-10' : ''} w-7 absolute -top-9 left-[50%] right-[50%] -translate-x-1/2"
class="{openMenu ? 'z-20' : ''} w-7 absolute -top-9 left-[50%] right-[50%] -translate-x-1/2"
>
{#if moving}
<button
@@ -203,7 +203,7 @@
</div>
{#if insertable && insertableEnd}
<div
class="{openMenu2 ? 'z-10' : ''} w-7 absolute top-11 left-[50%] right-[50%] -translate-x-1/2"
class="{openMenu2 ? 'z-20' : ''} w-7 absolute top-11 left-[50%] right-[50%] -translate-x-1/2"
>
{#if moving}
<button
@@ -101,7 +101,7 @@
{#if insertable && modules && (label != 'Input' || modules.length == 0)}
<div
class="{openMenu ? 'z-10' : ''} w-7 absolute {whereInsert == 'after'
class="{openMenu ? 'z-20' : ''} w-7 absolute {whereInsert == 'after'
? 'top-12'
: '-top-10'} left-[50%] right-[50%] -translate-x-1/2"
>
@@ -8,7 +8,7 @@
import FlowPreviewButtons from '$lib/components/flows/header/FlowPreviewButtons.svelte'
import type { FlowEditorContext } from '$lib/components/flows/types'
import { writable } from 'svelte/store'
import type { Flow, FlowModule, Job } from '$lib/gen'
import type { FlowModule, Job, OpenFlow } from '$lib/gen'
import { initHistory } from '$lib/history'
import type { FlowState } from '$lib/components/flows/flowState'
import FlowModuleSchemaMap from '$lib/components/flows/map/FlowModuleSchemaMap.svelte'
@@ -22,15 +22,11 @@
let testJob: Job | undefined
const flowStore = writable({
path: '',
summary: '',
value: { modules: [] },
edited_by: '',
edited_at: '',
archived: false,
extra_perms: {},
schema: emptySchema()
} as Flow)
} as OpenFlow)
let initialCode = JSON.stringify($flowStore, null, 4)
const flowStateStore = writable({} as FlowState)
@@ -172,7 +168,7 @@
$: updateCode(editor, $flowStore)
function updateCode(editor: SimpleEditor, flow: Flow) {
function updateCode(editor: SimpleEditor, flow: OpenFlow) {
if (editor && !deepEqual(flow, JSON.parse(editor.getCode()))) {
editor.setCode(JSON.stringify(flow, null, 4))
}