fix(web): reasoning overflow and settings label spacing (#1166)

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>

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>
     )
 }
 

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>
     )
 }
 

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>
     )
 }