diff --git a/web/src/components/settings/SettingsPrimitives.tsx b/web/src/components/settings/SettingsPrimitives.tsx index 8d46065c..b695cdc2 100644 --- a/web/src/components/settings/SettingsPrimitives.tsx +++ b/web/src/components/settings/SettingsPrimitives.tsx @@ -1,7 +1,14 @@ import type { ReactNode } from 'react' -export function SettingsFieldLabel(props: { children: ReactNode; hidden?: boolean }) { - return props.hidden ? null :
{props.children}
+export function SettingsFieldLabel(props: { children: ReactNode; hidden?: boolean; description?: string }) { + if (props.hidden) return null + if (!props.description) return
{props.children}
+ return ( +
+
{props.children}
+
{props.description}
+
+ ) } export function ChevronRightIcon(props: { className?: string }) { @@ -70,6 +77,7 @@ export function SettingsSwitch(props: { label: string; description?: string; che export function SettingsChoiceGroup(props: { label: string + description?: string hideLabel?: boolean value: T options: ReadonlyArray<{ value: T; label: string; description?: string }> @@ -79,7 +87,7 @@ export function SettingsChoiceGroup(props: { const columns = props.columns === 5 ? 'grid-cols-5' : props.columns === 4 ? 'grid-cols-2 sm:grid-cols-4' : 'grid-cols-2' return (
- +
{props.options.map((option) => { const selected = props.value === option.value diff --git a/web/src/routes/settings/display.tsx b/web/src/routes/settings/display.tsx index 8524ed01..1d91da35 100644 --- a/web/src/routes/settings/display.tsx +++ b/web/src/routes/settings/display.tsx @@ -160,11 +160,11 @@ export default function SettingsDisplayPage() { ({ value: option.value, label: t(option.labelKey) }))} onChange={setSessionListStatusMode} /> - {sessionListStatusMode === 'detailed' ?
{t('settings.display.sessionListStatus.detailedDescription')}
: null} ) diff --git a/web/src/routes/settings/index.test.tsx b/web/src/routes/settings/index.test.tsx index 2f14feeb..40707100 100644 --- a/web/src/routes/settings/index.test.tsx +++ b/web/src/routes/settings/index.test.tsx @@ -213,6 +213,15 @@ describe('responsive settings pages', () => { expect(screen.queryByRole('listbox')).not.toBeInTheDocument() }) + it('keeps the session status description visible with its choice group', () => { + renderPage() + + const description = screen.getByText('Shows why a session stopped: permission, input, background work, new activity, or a scheduled message (clock icon).') + const choices = screen.getByRole('radiogroup', { name: 'Session list status' }) + expect(description.parentElement?.parentElement).toBe(choices.parentElement) + expect(description.compareDocumentPosition(choices) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy() + }) + it('keeps chat enum choices inline', () => { renderPage() fireEvent.click(screen.getByRole('radio', { name: 'Insert newline' }))