From 31ad7a6616426aa254be8c038d35f41aa5fbdb64 Mon Sep 17 00:00:00 2001
From: TEEK <teekalpha@outlook.com>
Date: Sun, 26 Jul 2026 15:04:39 +0800
Subject: [PATCH] fix(web): reasoning overflow and settings label spacing
 (#1166)

---
 web/src/components/assistant-ui/reasoning.tsx      | 2 +-
 web/src/components/settings/SettingsPrimitives.tsx | 6 +++---
 web/src/routes/settings/chat.tsx                   | 6 +++---
 web/src/routes/settings/display.tsx                | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/components/assistant-ui/reasoning.tsx b/web/src/components/assistant-ui/reasoning.tsx
index 10c9cc08..546d1e2e 100644
--- a/web/src/components/assistant-ui/reasoning.tsx
+++ b/web/src/components/assistant-ui/reasoning.tsx
@@ -96,7 +96,7 @@ export const ReasoningGroup: FC<PropsWithChildren> = ({ children }) => {
                     isOpen ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'
                 )}
             >
-                <div className="border-t border-[var(--app-divider)] px-3.5 py-3">
+                <div className="max-h-[60vh] overflow-y-auto overscroll-contain border-t border-[var(--app-divider)] px-3.5 py-3">
                     {children}
                 </div>
             </div>
diff --git a/web/src/components/settings/SettingsPrimitives.tsx b/web/src/components/settings/SettingsPrimitives.tsx
index fd13116b..860507e1 100644
--- a/web/src/components/settings/SettingsPrimitives.tsx
+++ b/web/src/components/settings/SettingsPrimitives.tsx
@@ -74,8 +74,8 @@ export function SettingsChoiceGroup<T extends string | number>(props: {
 }) {
     const columns = props.columns === 5 ? 'grid-cols-5' : props.columns === 4 ? 'grid-cols-2 sm:grid-cols-4' : 'grid-cols-2'
     return (
-        <fieldset className="px-3 py-3">
-            <legend className="mb-2 text-[var(--app-fg)]">{props.label}</legend>
+        <div className="px-3 py-3">
+            <div className="mb-2 text-[var(--app-fg)]">{props.label}</div>
             <div role="radiogroup" aria-label={props.label} className={`grid ${columns} gap-2`}>
                 {props.options.map((option) => {
                     const selected = props.value === option.value
@@ -96,7 +96,7 @@ export function SettingsChoiceGroup<T extends string | number>(props: {
                     )
                 })}
             </div>
-        </fieldset>
+        </div>
     )
 }
 
diff --git a/web/src/routes/settings/chat.tsx b/web/src/routes/settings/chat.tsx
index 7823880b..1e13a8ff 100644
--- a/web/src/routes/settings/chat.tsx
+++ b/web/src/routes/settings/chat.tsx
@@ -22,8 +22,8 @@ function ChatSurfaceColorControl(props: {
     const { t } = useTranslation()
     const pickerValue = getChatSurfaceColorPickerValue(props.preference)
     return (
-        <fieldset className="px-3 py-3">
-            <legend className="mb-2 text-[var(--app-fg)]">{props.label}</legend>
+        <div className="px-3 py-3">
+            <div className="mb-2 text-[var(--app-fg)]">{props.label}</div>
             <div role="radiogroup" aria-label={props.label} className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                 {getChatSurfaceColorPresetOptions().map((option) => {
                     const preference = toPresetChatSurfaceColorPreference(option.value)
@@ -40,7 +40,7 @@ function ChatSurfaceColorControl(props: {
                 {t('settings.chat.surfaceColor.custom')}
                 <input type="color" value={pickerValue} onChange={(event) => props.onCustomChange(event.target.value)} className="h-9 w-12 cursor-pointer border-0 bg-transparent p-0" />
             </label>
-        </fieldset>
+        </div>
     )
 }
 
diff --git a/web/src/routes/settings/display.tsx b/web/src/routes/settings/display.tsx
index e6183c5e..e9a13301 100644
--- a/web/src/routes/settings/display.tsx
+++ b/web/src/routes/settings/display.tsx
@@ -23,8 +23,8 @@ function ColorThemePicker() {
     const { colorTheme, setColorTheme } = useColorTheme()
 
     return (
-        <fieldset className="px-3 py-3">
-            <legend className="mb-2 text-[var(--app-fg)]">{t('settings.display.colorTheme')}</legend>
+        <div className="px-3 py-3">
+            <div className="mb-2 text-[var(--app-fg)]">{t('settings.display.colorTheme')}</div>
             <div role="radiogroup" aria-label={t('settings.display.colorTheme')} className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                 {getColorThemeOptions().map((option) => (
                     <ColorThemeOption
@@ -36,7 +36,7 @@ function ColorThemePicker() {
                     />
                 ))}
             </div>
-        </fieldset>
+        </div>
     )
 }