From 36eedc870190cc5b6df82b1a3d2a3b7a532a27cd Mon Sep 17 00:00:00 2001
From: Ananovo <techotaku39@outlook.com>
Date: Thu, 30 Jul 2026 09:36:32 +0800
Subject: [PATCH] fix(web): align session list status description (#1243)

---
 web/src/components/settings/SettingsPrimitives.tsx | 14 +++++++++++---
 web/src/routes/settings/display.tsx                |  2 +-
 web/src/routes/settings/index.test.tsx             |  9 +++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

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 : <div className="mb-2 text-sm font-medium text-[var(--app-fg)]">{props.children}</div>
+export function SettingsFieldLabel(props: { children: ReactNode; hidden?: boolean; description?: string }) {
+    if (props.hidden) return null
+    if (!props.description) return <div className="mb-2 text-sm font-medium text-[var(--app-fg)]">{props.children}</div>
+    return (
+        <div className="mb-2">
+            <div className="text-sm font-medium text-[var(--app-fg)]">{props.children}</div>
+            <div className="mt-0.5 text-xs leading-snug text-[var(--app-hint)]">{props.description}</div>
+        </div>
+    )
 }
 
 export function ChevronRightIcon(props: { className?: string }) {
@@ -70,6 +77,7 @@ export function SettingsSwitch(props: { label: string; description?: string; che
 
 export function SettingsChoiceGroup<T extends string | number>(props: {
     label: string
+    description?: string
     hideLabel?: boolean
     value: T
     options: ReadonlyArray<{ value: T; label: string; description?: string }>
@@ -79,7 +87,7 @@ 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 (
         <div className="px-3 py-3">
-            <SettingsFieldLabel hidden={props.hideLabel}>{props.label}</SettingsFieldLabel>
+            <SettingsFieldLabel hidden={props.hideLabel} description={props.description}>{props.label}</SettingsFieldLabel>
             <div role="radiogroup" aria-label={props.label} className={`grid ${columns} gap-2`}>
                 {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() {
                 <SettingsSwitch label={t('settings.display.activeSessionsOnly')} description={t('settings.display.activeSessionsOnly.desc')} checked={showActiveSessionsOnly} onChange={setShowActiveSessionsOnly} />
                 <SettingsChoiceGroup
                     label={t('settings.display.sessionListStatus')}
+                    description={t('settings.display.sessionListStatus.detailedDescription')}
                     value={sessionListStatusMode}
                     options={getSessionListStatusModeOptions().map((option) => ({ value: option.value, label: t(option.labelKey) }))}
                     onChange={setSessionListStatusMode}
                 />
-                {sessionListStatusMode === 'detailed' ? <div className="px-3 pb-3 text-xs text-[var(--app-hint)]">{t('settings.display.sessionListStatus.detailedDescription')}</div> : null}
             </SettingsSection>
         </SettingsPageContent>
     )
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(<SettingsDisplayPage />)
+
+        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(<SettingsChatPage />)
         fireEvent.click(screen.getByRole('radio', { name: 'Insert newline' }))