From 6cfcf5fc7a1323177055850babd7af8e41b1996b Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sun, 25 Oct 2026 00:48:44 -0400
Subject: [PATCH] fix(a11y): the model and prompt editors' name, ID and command
 fields are at least 24 pixels tall when Accessibility Mode is on (#33149)

---
 .../components/workspace/Models/ModelEditor.svelte   | 12 +++++++++---
 .../components/workspace/Prompts/PromptEditor.svelte | 10 +++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 816768975d..96c0884b60 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -1102,7 +1102,9 @@
 											<div class="flex min-w-0 items-center gap-2">
 												{#if editingLocale}
 													<input
-														class="min-w-0 flex-1 bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
+														class="min-w-0 flex-1 {($settings?.highContrastMode ?? false)
+															? 'min-h-6'
+															: ''} bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
 														placeholder={name || $i18n.t('Model Name')}
 														value={localizedField('name')}
 														on:input={(e) =>
@@ -1113,7 +1115,9 @@
 													/>
 												{:else}
 													<input
-														class="min-w-0 flex-1 bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
+														class="min-w-0 flex-1 {($settings?.highContrastMode ?? false)
+															? 'min-h-6'
+															: ''} bg-transparent text-base leading-tight text-gray-900 outline-hidden placeholder:text-gray-300 dark:text-white dark:placeholder:text-gray-700 md:text-lg"
 														placeholder={$i18n.t('Model Name')}
 														bind:value={name}
 														required
@@ -1181,7 +1185,9 @@
 											{/if}
 
 											<input
-												class="block w-full bg-transparent py-0.5 text-xs text-gray-500 outline-hidden placeholder:text-gray-300 dark:text-gray-500 dark:placeholder:text-gray-700"
+												class="block w-full {($settings?.highContrastMode ?? false)
+													? 'min-h-6'
+													: ''} bg-transparent py-0.5 text-xs text-gray-500 outline-hidden placeholder:text-gray-300 dark:text-gray-500 dark:placeholder:text-gray-700"
 												placeholder={$i18n.t('Model ID')}
 												bind:value={id}
 												disabled={edit}
diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index 882dfd29d1..9c6c97316f 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -14,7 +14,7 @@
 	import Check from '$lib/components/icons/Check.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import AccessControlModal from '../common/AccessControlModal.svelte';
-	import { user } from '$lib/stores';
+	import { user, settings } from '$lib/stores';
 	import { slugify, formatDate, copyToClipboard } from '$lib/utils';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
@@ -473,7 +473,9 @@
 
 		<div class="shrink-0 px-1 pb-2">
 			<input
-				class="w-full bg-transparent text-sm outline-hidden"
+				class="w-full {($settings?.highContrastMode ?? false)
+					? 'min-h-6'
+					: ''} bg-transparent text-sm outline-hidden"
 				placeholder={$i18n.t('Prompt Name')}
 				aria-label={$i18n.t('Prompt Name')}
 				bind:value={name}
@@ -495,7 +497,9 @@
 					<div class="flex min-w-0 items-center gap-0.5">
 						<span>/</span>
 						<input
-							class="min-w-0 flex-1 bg-transparent outline-hidden"
+							class="min-w-0 flex-1 {($settings?.highContrastMode ?? false)
+								? 'min-h-6'
+								: ''} bg-transparent outline-hidden"
 							placeholder={$i18n.t('command')}
 							aria-label={$i18n.t('Command')}
 							bind:value={command}