From 19fbd13e41058b67ff4b60d8b50be6873139c0a8 Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Fri, 3 Oct 2025 17:36:47 +0200
Subject: [PATCH] fixed height on optional tag

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 frontend/src/lib/components/CheckboxField.svelte        | 4 +++-
 frontend/src/lib/components/DateField.svelte            | 2 +-
 frontend/src/lib/components/DateTimeField.svelte        | 4 +++-
 frontend/src/lib/components/FileField.svelte            | 4 +++-
 frontend/src/lib/components/PasswordField.svelte        | 4 +++-
 frontend/src/lib/components/SelectSquare.svelte         | 4 ++--
 frontend/src/lib/components/TextField.svelte            | 4 +++-
 frontend/src/lib/components/TextFieldMultiSelect.svelte | 2 +-
 frontend/src/lib/components/TextFieldSelect.svelte      | 2 +-
 frontend/src/lib/components/TextareaField.svelte        | 4 +++-
 10 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/CheckboxField.svelte b/frontend/src/lib/components/CheckboxField.svelte
index 4a610ed..f4315f8 100644
--- a/frontend/src/lib/components/CheckboxField.svelte
+++ b/frontend/src/lib/components/CheckboxField.svelte
@@ -55,7 +55,9 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+			<div
+				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+			>
 				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
 					optional
 				</p>
diff --git a/frontend/src/lib/components/DateField.svelte b/frontend/src/lib/components/DateField.svelte
index 0fc0cc2..e3ac321 100644
--- a/frontend/src/lib/components/DateField.svelte
+++ b/frontend/src/lib/components/DateField.svelte
@@ -71,7 +71,7 @@
 			{/if}
 			{#if optional === true}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 				>
 					<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
 						optional
diff --git a/frontend/src/lib/components/DateTimeField.svelte b/frontend/src/lib/components/DateTimeField.svelte
index 4532aae..38df170 100644
--- a/frontend/src/lib/components/DateTimeField.svelte
+++ b/frontend/src/lib/components/DateTimeField.svelte
@@ -121,7 +121,9 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+			<div
+				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+			>
 				<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/FileField.svelte b/frontend/src/lib/components/FileField.svelte
index ec101f7..14138c1 100644
--- a/frontend/src/lib/components/FileField.svelte
+++ b/frontend/src/lib/components/FileField.svelte
@@ -52,7 +52,9 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+			<div
+				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+			>
 				<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/PasswordField.svelte b/frontend/src/lib/components/PasswordField.svelte
index b72f991..28fd334 100644
--- a/frontend/src/lib/components/PasswordField.svelte
+++ b/frontend/src/lib/components/PasswordField.svelte
@@ -68,7 +68,9 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+			<div
+				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+			>
 				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
 					optional
 				</p>
diff --git a/frontend/src/lib/components/SelectSquare.svelte b/frontend/src/lib/components/SelectSquare.svelte
index d08bb75..763c959 100644
--- a/frontend/src/lib/components/SelectSquare.svelte
+++ b/frontend/src/lib/components/SelectSquare.svelte
@@ -14,7 +14,7 @@
 
 <div class="flex flex-col gap-2 py-2">
 	{#if label}
-		<div class="flex flex-row">
+		<div class="flex flex-row items-center">
 			<div class="font-semibold text-slate-600 dark:text-gray-300 transition-colors duration-200">
 				{label}
 			</div>
@@ -25,7 +25,7 @@
 			{/if}
 			{#if optional}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 				>
 					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 				</div>
diff --git a/frontend/src/lib/components/TextField.svelte b/frontend/src/lib/components/TextField.svelte
index bbc674e..1cbf50f 100644
--- a/frontend/src/lib/components/TextField.svelte
+++ b/frontend/src/lib/components/TextField.svelte
@@ -68,7 +68,9 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+			<div
+				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+			>
 				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
 					optional
 				</p>
diff --git a/frontend/src/lib/components/TextFieldMultiSelect.svelte b/frontend/src/lib/components/TextFieldMultiSelect.svelte
index 520eb28..1a2db5d 100644
--- a/frontend/src/lib/components/TextFieldMultiSelect.svelte
+++ b/frontend/src/lib/components/TextFieldMultiSelect.svelte
@@ -129,7 +129,7 @@
 			{/if}
 			{#if optional === true}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 				>
 					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 				</div>
diff --git a/frontend/src/lib/components/TextFieldSelect.svelte b/frontend/src/lib/components/TextFieldSelect.svelte
index 360ff22..07c7a95 100644
--- a/frontend/src/lib/components/TextFieldSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSelect.svelte
@@ -236,7 +236,7 @@
 			{/if}
 			{#if optional === true}
 				<div
-					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200"
+					class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
 				>
 					<p class="text-slate-600 dark:text-gray-300 text-xs">optional</p>
 				</div>
diff --git a/frontend/src/lib/components/TextareaField.svelte b/frontend/src/lib/components/TextareaField.svelte
index fd1e122..9319b5d 100644
--- a/frontend/src/lib/components/TextareaField.svelte
+++ b/frontend/src/lib/components/TextareaField.svelte
@@ -61,7 +61,9 @@
 			</ToolTip>
 		{/if}
 		{#if optional === true}
-			<div class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200">
+			<div
+				class="bg-gray-100 dark:bg-gray-700 ml-2 px-2 rounded-md transition-colors duration-200 h-6 flex items-center"
+			>
 				<p class="text-slate-600 dark:text-gray-300 text-xs transition-colors duration-200">
 					optional
 				</p>