From e2d44ca654fffd6eca049fc808f7eae5d621afc5 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 31 Dec 2022 18:55:32 +0100
Subject: [PATCH] apps nits

---
 frontend/src/lib/components/apps/editor/AppEditor.svelte | 4 ++--
 .../lib/components/apps/editor/ComponentEditor.svelte    | 9 +++++++--
 .../lib/components/apps/editor/ComponentHeader.svelte    | 7 ++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 02048baefe..d65fbaa926 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -105,7 +105,7 @@
 			<Pane size={15} minSize={5} maxSize={33}>
 				<ContextPanel />
 			</Pane>
-			<Pane size={65}>
+			<Pane size={64}>
 				<SplitPanesWrapper horizontal>
 					<Pane size={70}>
 						<div class="bg-gray-100 w-full p-4 h-full overflow-auto">
@@ -140,7 +140,7 @@
 					</Pane>
 				</SplitPanesWrapper>
 			</Pane>
-			<Pane size={20} minSize={5} maxSize={33}>
+			<Pane size={21} minSize={5} maxSize={33}>
 				<div class="relative">
 					<Tabs bind:selected={selectedTab}>
 						<Tab value="insert" size="xs">
diff --git a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
index f21c14322a..5e4ee72b31 100644
--- a/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentEditor.svelte
@@ -21,12 +21,17 @@
 	export let locked: boolean = false
 	export let pointerdown: boolean = false
 
+	let hover = false
 	const { staticOutputs, mode, connectingInput } = getContext<AppEditorContext>('AppEditorContext')
 </script>
 
-<div class="h-full flex flex-col w-full component">
+<div
+	on:pointerenter={() => (hover = true)}
+	on:pointerleave={() => (hover = false)}
+	class="h-full flex flex-col w-full component"
+>
 	{#if $mode !== 'preview'}
-		<ComponentHeader {pointerdown} {component} {selected} on:delete on:lock {locked} />
+		<ComponentHeader {hover} {pointerdown} {component} {selected} on:delete on:lock {locked} />
 	{/if}
 
 	<div
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index a009bf58c3..f4e64b712d 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 	import type { AppComponent } from '../types'
-	import { Anchor, Lock, Move, X } from 'lucide-svelte'
+	import { Anchor, Move, X } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
 	export let component: AppComponent
 	export let selected: boolean
 	export let locked: boolean = false
 	export let pointerdown: boolean = false
+	export let hover: boolean = false
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -21,7 +22,7 @@
 	{component.id}
 </span>
 
-{#if pointerdown || selected}
+{#if pointerdown || selected || hover}
 	<button
 		class={classNames(
 			'text-white px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute  right-10 z-50 cursor-pointer',
@@ -40,7 +41,7 @@
 	</button>
 {/if}
 
-{#if selected}
+{#if selected || hover}
 	<span
 		on:mousedown|stopPropagation|capture
 		class={classNames(