From 14d464e669cdf4df34458b1237c40a35962dcd7e Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Wed, 18 Feb 2026 19:54:53 +0100
Subject: [PATCH] fix TextFieldSelect eclipses and title on hover

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 frontend/src/lib/components/TextFieldSelect.svelte         | 7 ++++---
 .../src/lib/components/form/TextFieldSelectWithType.svelte | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/TextFieldSelect.svelte b/frontend/src/lib/components/TextFieldSelect.svelte
index c706dfa..fd25d6a 100644
--- a/frontend/src/lib/components/TextFieldSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSelect.svelte
@@ -320,13 +320,15 @@
 				aria-autocomplete="list"
 				aria-haspopup="listbox"
 				value={showDropdown ? value : displayValue}
+				title={displayValue}
 				on:focus={handleFocus}
 				on:blur={handleBlur}
 				on:input={handleInput}
 				on:keydown={handleKeyDown}
 				on:click={handleFocus}
 				autocomplete="off"
-				class="w-full relative rounded-md py-2 pr-10 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
+				style={optional && hasValue ? 'padding-right: 4rem;' : 'padding-right: 2.5rem;'}
+				class="w-full relative rounded-md py-2 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200 overflow-hidden text-ellipsis whitespace-nowrap"
 				class:pl-10={showDropdown}
 				class:pl-4={!showDropdown}
 				placeholder={!hasValue && !showDropdown ? placeholder : ''}
@@ -344,7 +346,7 @@
 			<!-- Clear button for optional fields -->
 			{#if optional === true && hasValue}
 				<button
-					class="absolute right-10 z-10"
+					class="absolute right-8 z-10 hover:opacity-70 transition-opacity"
 					type="button"
 					aria-label="Clear selection"
 					on:click={(e) => {
@@ -360,7 +362,6 @@
 			<!-- Dropdown arrow -->
 			<img
 				class="absolute pointer-events-none w-4 right-3"
-				class:right-12={optional === true && hasValue}
 				src="/arrow.svg"
 				alt=""
 				aria-hidden="true"
diff --git a/frontend/src/lib/components/form/TextFieldSelectWithType.svelte b/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
index 3b949bf..319add3 100644
--- a/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
+++ b/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
@@ -308,7 +308,8 @@
 				on:keydown={handleKeyDown}
 				on:click={handleFocus}
 				autocomplete="off"
-				class="w-full relative rounded-md py-2 pr-10 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200"
+				style={optional && hasValue ? 'padding-right: 4rem;' : 'padding-right: 2.5rem;'}
+				class="w-full relative rounded-md py-2 text-gray-600 dark:text-gray-300 border border-transparent focus:outline-none focus:border-solid focus:border focus:border-slate-400 dark:focus:border-highlight-blue/80 focus:bg-gray-100 dark:focus:bg-gray-700/60 bg-grayblue-light dark:bg-gray-900/60 font-normal cursor-pointer focus:cursor-text transition-colors duration-200 overflow-hidden text-ellipsis whitespace-nowrap"
 				class:pl-10={isFocused && showDropdown}
 				class:pl-20={!isFocused}
 				class:pl-4={isFocused && !showDropdown}
@@ -328,7 +329,7 @@
 			<!-- Clear button for optional fields -->
 			{#if optional === true && hasValue}
 				<button
-					class="absolute right-10 z-10"
+					class="absolute right-8 z-10 hover:opacity-70 transition-opacity"
 					type="button"
 					aria-label="Clear selection"
 					on:click={(e) => {
@@ -344,7 +345,6 @@
 			<!-- Dropdown arrow -->
 			<img
 				class="absolute pointer-events-none w-4 right-3"
-				class:right-12={optional === true && hasValue}
 				src="/arrow.svg"
 				alt=""
 				aria-hidden="true"