From c751a5d6aa49e4bc0970f87b3f1e975e8ee58479 Mon Sep 17 00:00:00 2001
From: hugocasa <hugo@casademont.ch>
Date: Mon, 29 Sep 2025 14:04:52 +0200
Subject: [PATCH] fix(frontend): prevent label interference with monaco editor
 in instance settings (#6701)

---
 .../src/lib/components/InstanceSetting.svelte | 22 ++++++---
 .../ObjectStoreConfigSettings.svelte          | 46 +++++++++++--------
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/InstanceSetting.svelte b/frontend/src/lib/components/InstanceSetting.svelte
index ddd5329a04..6a059dcf00 100644
--- a/frontend/src/lib/components/InstanceSetting.svelte
+++ b/frontend/src/lib/components/InstanceSetting.svelte
@@ -353,13 +353,21 @@
 						</div>
 					{/if}
 				{:else if setting.fieldType == 'codearea'}
-					<SimpleEditor
-						autoHeight
-						class="editor"
-						lang={setting.codeAreaLang ?? 'txt'}
-						bind:code={$values[setting.key]}
-						fixedOverflowWidgets={false}
-					/>
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onclick={(ev) => {
+							ev.stopPropagation() // this is to prevent wrapping label interference
+						}}
+					>
+						<SimpleEditor
+							autoHeight
+							class="editor"
+							lang={setting.codeAreaLang ?? 'txt'}
+							bind:code={$values[setting.key]}
+							fixedOverflowWidgets={false}
+						/></div
+					>
 				{:else if setting.fieldType == 'license_key'}
 					{@const { valid, expiration } = parseLicenseKey($values[setting.key] ?? '')}
 					<div class="flex gap-2">
diff --git a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte b/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
index ab596927cf..7145faa257 100644
--- a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
+++ b/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
@@ -266,28 +266,36 @@
 				<label class="block pb-2">
 					<span class="text-primary font-semibold text-sm">Service Account Key</span>
 					<span class="text-tertiary text-2xs">JSON content of the service account key file</span>
-					<SimpleEditor
-						lang="json"
-						bind:code={
-							() => {
-								if (bucket_config?.type === 'Gcs') {
-									return JSON.stringify(bucket_config.serviceAccountKey)
-								} else {
-									return '{}'
-								}
-							},
-							(v) => {
-								if (bucket_config?.type === 'Gcs') {
-									try {
-										bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
-									} catch (_) {
-										bucket_config.serviceAccountKey = {}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onclick={(ev) => {
+							ev.stopPropagation() // this is to prevent wrapping label interference
+						}}
+					>
+						<SimpleEditor
+							lang="json"
+							bind:code={
+								() => {
+									if (bucket_config?.type === 'Gcs') {
+										return JSON.stringify(bucket_config.serviceAccountKey)
+									} else {
+										return '{}'
+									}
+								},
+								(v) => {
+									if (bucket_config?.type === 'Gcs') {
+										try {
+											bucket_config.serviceAccountKey = JSON.parse(v ?? '{}')
+										} catch (_) {
+											bucket_config.serviceAccountKey = {}
+										}
 									}
 								}
 							}
-						}
-						class="h-80"
-					/>
+							class="h-80"
+						/>
+					</div>
 				</label>
 			{:else}
 				<div>Unknown bucket type {bucket_config['type']}</div>