fix(frontend): interaction with code instance settings on chrome (#6859)

frontend/src/lib/components/InstanceSetting.svelte

@@ -289,8 +289,7 @@
 			</ToggleButtonGroup>
 		</div>
 	{:else}
-		<!-- svelte-ignore a11y_label_has_associated_control -->
-		<label class="block pb-2">
+		{#snippet settingContent()}
 			<span class="text-primary font-semibold text-sm">{setting.label}</span>
 			{#if setting.description}
 				<span class="text-secondary text-xs">
@@ -353,21 +352,13 @@
 						</div>
 					{/if}
 				{:else if setting.fieldType == 'codearea'}
-					<!-- 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
-					>
+					<SimpleEditor
+						autoHeight
+						class="editor"
+						lang={setting.codeAreaLang ?? 'txt'}
+						bind:code={$values[setting.key]}
+						fixedOverflowWidgets={false}
+					/>
 				{:else if setting.fieldType == 'license_key'}
 					{@const { valid, expiration } = parseLicenseKey($values[setting.key] ?? '')}
 					<div class="flex gap-2">
@@ -1053,9 +1044,7 @@
 										bind:value={$values[setting.key].value}
 									/>
 								</label>
-								<label class="block">
-									<span class="text-primary font-semibold text-sm">GB</span>
-								</label>
+								<span class="text-primary font-semibold text-sm">GB</span>
 							{/if}
 						</div>
 						<div class="mb-6"></div>
@@ -1095,6 +1084,15 @@
 			{:else}
 				<input disabled placeholder="Loading..." />
 			{/if}
-		</label>
+		{/snippet}
+		{#if ['codearea', 'object_store_config'].includes(setting.fieldType)}
+			<div class="block pb-2">
+				{@render settingContent()}
+			</div>
+		{:else}
+			<label class="block pb-2">
+				{@render settingContent()}
+			</label>
+		{/if}
 	{/if}
 {/if}

frontend/src/lib/components/ObjectStoreConfigSettings.svelte

@@ -263,40 +263,32 @@
 					<span class="text-primary font-semibold text-sm">Bucket</span>
 					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
 				</label>
-				<label class="block pb-2">
+				<div 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>
-					<!-- 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 = {}
-										}
+					<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"
-						/>
-					</div>
-				</label>
+						}
+						class="h-80"
+					/>
+				</div>
 			{:else}
 				<div>Unknown bucket type {bucket_config['type']}</div>
 			{/if}