From 413311a26b5af95b2ae8328a33b23943230a748d Mon Sep 17 00:00:00 2001
From: Prashant Varma <prashantvarma5083@gmail.com>
Date: Mon, 7 Sep 2026 13:18:50 +0530
Subject: [PATCH 1/3] fix: layer blend mode preview, hovering the mouse over
 the dividing line changes the blend mode to normal

---
 frontend/src/components/floating-menus/MenuList.svelte     | 7 ++++++-
 frontend/src/components/panels/Layers.svelte               | 7 ++++---
 .../src/components/widgets/inputs/DropdownInput.svelte     | 3 +++
 frontend/src/components/widgets/inputs/FieldInput.svelte   | 2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 1d90d9cbe32..70e5606dbbd 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -250,7 +250,6 @@
 
 	function onEntryPointerLeave(menuListEntry: MenuListEntry) {
 		if (!menuListEntry.children?.length) {
-			dispatch("hoverOutEntry");
 			return;
 		}
 
@@ -263,6 +262,11 @@
 		}
 	}
 
+	function onPointerLeave() {
+		dispatch("hoverOutEntry");
+		return;
+	}
+
 	function includeSeparator(entries: MenuListEntry[][], section: MenuListEntry[], sectionIndex: number, search: string): boolean {
 		const elementsBeforeCurrentSection = entries
 			.slice(0, sectionIndex)
@@ -465,6 +469,7 @@
 		bind:this={scroller}
 		scrollableY={scrollableY && virtualScrollingEntryHeight !== 0}
 		on:scroll={onScroll}
+		on:pointerleave={onPointerLeave}
 		styles={{ "min-width": virtualScrollingEntryHeight ? `${minWidth}px` : `inherit` }}
 	>
 		{#if virtualScrollingEntryHeight}
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 539c71298ce..9f5a31c6516 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -695,12 +695,13 @@
 		.control-bar {
 			height: 32px;
 			flex: 0 0 auto;
-			margin: 0 4px;
+			padding-right: 15px;
+
 			border-bottom: 1px solid var(--color-2-mildblack);
-			justify-content: space-between;
+			justify-content: space-evenly;
 
 			.widget-span:first-child {
-				flex: 1 1 auto;
+				flex: 1 0.5 auto;
 			}
 
 			&:not(:has(*)) {
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index cb9d3277877..6a8e3bbb9a8 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -54,6 +54,9 @@
 	$: watchOpen(open);
 
 	function watchOpen(open: boolean) {
+		if (!open && initialSelectedIndex !== undefined) {
+			dispatch("hoverOutEntry", initialSelectedIndex);
+		}
 		initialSelectedIndex = open ? selectedIndex : undefined;
 	}
 
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index a823b3a2e71..e63dc6a430d 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -123,7 +123,7 @@
 
 <style lang="scss">
 	.field-input {
-		min-width: 80px;
+		min-width: 70px;
 		height: auto;
 		position: relative;
 		border-radius: 2px;

From a047386db58cc3d859feb877f9aaa4b8881ab84f Mon Sep 17 00:00:00 2001
From: Prashant Varma <prashantvarma5083@gmail.com>
Date: Mon, 7 Sep 2026 14:23:30 +0530
Subject: [PATCH 2/3] fix: prevent stale hoverOutEntry from overwriting
 dropdown selection and restore control bar left inset

---
 frontend/src/components/panels/Layers.svelte                | 1 +
 frontend/src/components/widgets/inputs/DropdownInput.svelte | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index 9f5a31c6516..0acd4865af3 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -695,6 +695,7 @@
 		.control-bar {
 			height: 32px;
 			flex: 0 0 auto;
+			padding-left: 4px;
 			padding-right: 15px;
 
 			border-bottom: 1px solid var(--color-2-mildblack);
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 6a8e3bbb9a8..2091d93e35b 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -46,6 +46,7 @@
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;
 	let initialSelectedIndex: number | undefined = undefined;
+	let selectionMade = false;
 	let open = false;
 
 	$: watchSelectedIndex(selectedIndex);
@@ -54,10 +55,11 @@
 	$: watchOpen(open);
 
 	function watchOpen(open: boolean) {
-		if (!open && initialSelectedIndex !== undefined) {
+		if (!open && initialSelectedIndex !== undefined && !selectionMade) {
 			dispatch("hoverOutEntry", initialSelectedIndex);
 		}
 		initialSelectedIndex = open ? selectedIndex : undefined;
+		selectionMade = false;
 	}
 
 	// Called only when `selectedIndex` is changed from outside this component
@@ -80,6 +82,7 @@
 			if (initialSelectedIndex !== undefined) dispatch("hoverInEntry", initialSelectedIndex);
 			const index = entries.flat().findIndex((entry) => entry.value === activeEntry.value);
 			if (index !== -1) {
+				selectionMade = true;
 				dispatch("selectedIndex", index);
 			} else {
 				// eslint-disable-next-line no-console

From 7574e1b960c5141aebc8aa65599cc712ae028248 Mon Sep 17 00:00:00 2001
From: Prashant Varma <prashantvarma5083@gmail.com>
Date: Mon, 7 Sep 2026 15:08:29 +0530
Subject: [PATCH 3/3] fix: eliminate reactive ordering dependency in dropdown
 hoverOut suppression

---
 .../widgets/inputs/DropdownInput.svelte        | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 2091d93e35b..9586ee70a05 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -46,7 +46,7 @@
 	let activeEntry = makeActiveEntry();
 	let activeEntrySkipWatcher = false;
 	let initialSelectedIndex: number | undefined = undefined;
-	let selectionMade = false;
+	let activeEntryOnOpen: string | undefined = undefined;
 	let open = false;
 
 	$: watchSelectedIndex(selectedIndex);
@@ -55,11 +55,18 @@
 	$: watchOpen(open);
 
 	function watchOpen(open: boolean) {
-		if (!open && initialSelectedIndex !== undefined && !selectionMade) {
-			dispatch("hoverOutEntry", initialSelectedIndex);
+		if (open) {
+			initialSelectedIndex = selectedIndex;
+			activeEntryOnOpen = activeEntry.value;
+		} else {
+			// Suppress hoverOutEntry if a new selection was made
+			const selectionMade = activeEntryOnOpen !== undefined && activeEntry.value !== activeEntryOnOpen;
+			if (initialSelectedIndex !== undefined && !selectionMade) {
+				dispatch("hoverOutEntry", initialSelectedIndex);
+			}
+			initialSelectedIndex = undefined;
+			activeEntryOnOpen = undefined;
 		}
-		initialSelectedIndex = open ? selectedIndex : undefined;
-		selectionMade = false;
 	}
 
 	// Called only when `selectedIndex` is changed from outside this component
@@ -82,7 +89,6 @@
 			if (initialSelectedIndex !== undefined) dispatch("hoverInEntry", initialSelectedIndex);
 			const index = entries.flat().findIndex((entry) => entry.value === activeEntry.value);
 			if (index !== -1) {
-				selectionMade = true;
 				dispatch("selectedIndex", index);
 			} else {
 				// eslint-disable-next-line no-console