small ux nits for sidebar tabs

windmill-labs · Feb 1, 2025 · f9e4e0a · f9e4e0a
1 parent 2478d29
commit f9e4e0a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -233,7 +233,7 @@
 
 	$: !!editTab ? openEditTab() : closeEditTab()
 
-	let pannelButtonWidth: number = 0
+	let panelButtonWidth: number = 0
 	export let pannelExtraButtonWidth: number = 0
 
 	export function updateJson() {
@@ -246,8 +246,8 @@
 	<div class="relative z-[100000]">
 		<div
 			class="absolute"
-			style="right: calc({editPanelSize}% - 2px - {pannelExtraButtonWidth}px); top: 0px;"
-			bind:clientWidth={pannelButtonWidth}
+			style="right: calc({editPanelSize}% - 1px - {pannelExtraButtonWidth}px); top: 0px;"
+			bind:clientWidth={panelButtonWidth}
 		>
 			<slot name="openEditTab" />
 		</div>
@@ -265,7 +265,7 @@
 							<div
 								style={editPanelSize > 0
 									? `width: 100%;`
-									: `width: calc(100% - ${pannelButtonWidth - pannelExtraButtonWidth}px);`}
+									: `width: calc(100% - ${panelButtonWidth - pannelExtraButtonWidth}px);`}
 							>
 								<slot name="addProperty" />
 							</div>
@@ -317,7 +317,7 @@
 			<Pane
 				bind:size={editPanelSize}
 				minSize={noPreview ? 100 : 50}
-				class={twMerge('border rounded-md', pannelButtonWidth > 0 ? 'rounded-tl-none' : '')}
+				class={twMerge('border rounded-md', panelButtonWidth > 0 ? 'rounded-tl-none' : '')}
 			>
 				{#if editTab !== 'inputEditor'}
 					<slot name="extraTab" />

diff --git a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
@@ -83,20 +83,19 @@
 	let captureTable: CaptureTable | undefined = undefined
 	let historicInputs: HistoricInputs | undefined = undefined
 	$: selectedTab, (dropdownItems = getDropdownItems())
+
+	let inputPanelSize = 70
 </script>
 
 <div class="h-fit">
+	<div class="relative z-[100000] w-full">
+		<div class="absolute" style="right: calc({100 - inputPanelSize}%); top: -1px;">
+			<SideBarTab expandRight={rightPanelOpen} {dropdownItems} fullMenu={true} noTrigger={true} />
+		</div>
+	</div>
 	<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>
-		<Pane class="!overflow-visible" size={70} minSize={30}>
-			<div class="relative w-full h-fit pr-12 pb-4 overflow-hidden" bind:clientHeight={rightHeight}>
-				<div class="absolute right-[1px] -top-[1px] z-50">
-					<SideBarTab
-						expandRight={rightPanelOpen}
-						{dropdownItems}
-						fullMenu={true}
-						noTrigger={true}
-					/>
-				</div>
+		<Pane bind:size={inputPanelSize} class="!overflow-visible" minSize={30}>
+			<div class="relative w-full h-fit pr-12 pb-4" bind:clientHeight={rightHeight}>
 				<slot />
 			</div>
 		</Pane>

diff --git a/frontend/src/lib/components/meltComponents/SideBarTab.svelte b/frontend/src/lib/components/meltComponents/SideBarTab.svelte
@@ -35,7 +35,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="flex flex-col relative !overflow-visible {expandRight ? 'pr-2 -mr-2' : ''}"
+	class="flex flex-col relative !overflow-visible w-[33px]"
 	on:mouseenter={handleMouseEnter}
 	on:mouseleave={handleMouseLeave}
 >