From 6d7665f470bd4c2e120fdf99751de5d66d6b5fad Mon Sep 17 00:00:00 2001
From: Diego Imbert <70353967+diegoimbert@users.noreply.github.com>
Date: Mon, 27 Oct 2025 18:17:47 +0100
Subject: [PATCH] Fix switch theme looking disabled (#6957)

* log out too bold

* nit wrap

* nit factor out popoverClasses
---
 frontend/src/lib/components/EditorBar.svelte  |  2 +-
 .../flows/content/FlowModuleHeader.svelte     | 39 ++++++-------------
 .../lib/components/sidebar/UserMenu.svelte    |  6 +--
 3 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index d094460dfb..36149f061e 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -1033,7 +1033,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		</div>
 	</div>
 
-	<div class="flex flex-row items-center gap-2">
+	<div class="flex flex-row items-center gap-2 whitespace-nowrap">
 		{@render right?.()}
 		{#if scriptPath && !noHistory}
 			<Button
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index 5c97c7a7f5..685256bc3a 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -33,16 +33,15 @@
 
 	const dispatch = createEventDispatcher()
 	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
+
+	let popoverClasses =
+		'center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
 </script>
 
-<div class="flex flex-row space-x-1">
+<div class="flex flex-row space-x-1 whitespace-nowrap">
 	{#if module.value.type === 'script' || module.value.type === 'rawscript' || module.value.type == 'flow'}
 		{#if module.retry?.constant || module.retry?.exponential}
-			<Popover
-				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				onClick={() => dispatch('toggleRetry')}
-			>
+			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleRetry')}>
 				<Repeat size={14} />
 				{#snippet text()}
 					Retries
@@ -52,7 +51,7 @@
 		{#if module?.value?.['concurrent_limit'] != undefined}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
+				class={popoverClasses}
 				onClick={() => dispatch('toggleConcurrency')}
 			>
 				<Gauge size={14} />
@@ -62,11 +61,7 @@
 			</Popover>
 		{/if}
 		{#if module.cache_ttl != undefined}
-			<Popover
-				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				onClick={() => dispatch('toggleCache')}
-			>
+			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleCache')}>
 				<Database size={14} />
 				{#snippet text()}
 					Cache
@@ -76,7 +71,7 @@
 		{#if module.stop_after_if || module.stop_after_all_iters_if}
 			<Popover
 				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
+				class={popoverClasses}
 				onClick={() => dispatch('toggleStopAfterIf')}
 			>
 				<Square size={14} />
@@ -86,11 +81,7 @@
 			</Popover>
 		{/if}
 		{#if module.suspend}
-			<Popover
-				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				onClick={() => dispatch('toggleSuspend')}
-			>
+			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleSuspend')}>
 				<PhoneIncoming size={14} />
 				{#snippet text()}
 					Suspend
@@ -98,11 +89,7 @@
 			</Popover>
 		{/if}
 		{#if module.sleep}
-			<Popover
-				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				onClick={() => dispatch('toggleSleep')}
-			>
+			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleSleep')}>
 				<Bed size={14} />
 				{#snippet text()}
 					Sleep
@@ -110,11 +97,7 @@
 			</Popover>
 		{/if}
 		{#if module.mock?.enabled}
-			<Popover
-				placement="bottom"
-				class="center-center rounded p-2 bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600"
-				onClick={() => dispatch('togglePin')}
-			>
+			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('togglePin')}>
 				<Pin size={14} />
 				{#snippet text()}
 					This step is pinned
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index 7ddb5a7e9b..77f791c6c8 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -86,11 +86,7 @@
 				Switch theme
 			</MenuItem>
 
-			<MenuItem
-				onClick={() => logout()}
-				class={twMerge(itemClass, 'text-primary font-semibold')}
-				{item}
-			>
+			<MenuItem onClick={() => logout()} class={itemClass} {item}>
 				<LogOut size={16} />
 				Sign out
 			</MenuItem>