authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-06 20:24:28-03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-06 20:24:28-03:00
log45387700bf49401fd9de4f2db36575e50f9649eb
tree2dc4864a710caa66be4ff88ac023ba81586a0c52
parent7e8ae6b8d667708b26ab7db9cd9c4ec9b1675815
signature Signed by PGP key B5690EEEBB952194

fix(web): keep settings section headings description-free (#10415)

4 files changed, 10 insertions(+), 19 deletions(-)

apps/web/src/components/settings/LoadBalancingSettings.tsx+2-5
...@@ -28,13 +28,10 @@ export function LoadBalancingSettings({...@@ -28,13 +28,10 @@ export function LoadBalancingSettings({
28 const updateSettings = useUpdateClientSettings();28 const updateSettings = useUpdateClientSettings();
2929
30 return (30 return (
31 <SettingsSection31 <SettingsSection {...searchableSetting("load-balancing")}>
32 {...searchableSetting("load-balancing")}
33 description="Choose how often each machine is used. Prefer gives a machine more work when it has capacity; Less often gives it less. Manual only excludes it from automatic selection. Preferences are saved for this client."
34 >
35 <SettingsRow32 <SettingsRow
36 title="Automatically balance load"33 title="Automatically balance load"
37 description="Automatically choose a connected machine for new threads in shared projects. You can choose a machine in the composer."34 description="Choose a machine automatically for new threads in shared projects."
38 control={35 control={
39 <Switch36 <Switch
40 aria-label="Automatically balance load"37 aria-label="Automatically balance load"
apps/web/src/components/settings/ProviderInstanceCard.tsx+4-6
...@@ -801,14 +801,12 @@ export function ProviderInstanceCard({...@@ -801,14 +801,12 @@ export function ProviderInstanceCard({
801801
802 return (802 return (
803 <>803 <>
804 <SettingsSection804 <SettingsSection title={displayName} icon={titleIconNode} headerAction={editorHeaderAction}>
805 title={displayName}
806 description={editorStatusNode}
807 icon={titleIconNode}
808 headerAction={editorHeaderAction}
809 >
810 <SettingsRow805 <SettingsRow
811 title="Display name"806 title="Display name"
807 status={
808 <div className="flex min-w-0 flex-wrap items-center gap-x-1.5">{editorStatusNode}</div>
809 }
812 control={810 control={
813 <div811 <div
814 inert={readOnly}812 inert={readOnly}
apps/web/src/components/settings/UsageProviderSettings.tsx-1
...@@ -37,7 +37,6 @@ export function UsageProviderSettings({...@@ -37,7 +37,6 @@ export function UsageProviderSettings({
37 <>37 <>
38 <SettingsSection38 <SettingsSection
39 {...searchableSetting("usage-providers")}39 {...searchableSetting("usage-providers")}
40 description="Connect a CLIProxyAPI hub to show its accounts on Usage → Limits."
41 headerAction={40 headerAction={
42 !readOnly ? (41 !readOnly ? (
43 <Button size="xs" variant="outline" onClick={() => setAdding(true)}>42 <Button size="xs" variant="outline" onClick={() => setAdding(true)}>
apps/web/src/components/settings/settingsLayout.tsx+4-7
...@@ -155,9 +155,9 @@ export function useRelativeTimeTick(intervalMs = 1_000) {...@@ -155,9 +155,9 @@ export function useRelativeTimeTick(intervalMs = 1_000) {
155 return nowMs;155 return nowMs;
156}156}
157157
158/** Muted section headings have no descriptions; explanatory copy belongs to individual settings. */
158export function SettingsSection({159export function SettingsSection({
159 title,160 title,
160 description,
161 hideTitle = false,161 hideTitle = false,
162 icon,162 icon,
163 headerAction,163 headerAction,
...@@ -167,7 +167,6 @@ export function SettingsSection({...@@ -167,7 +167,6 @@ export function SettingsSection({
167 ...sectionProps167 ...sectionProps
168}: ComponentPropsWithoutRef<"section"> & {168}: ComponentPropsWithoutRef<"section"> & {
169 title: string;169 title: string;
170 description?: ReactNode;
171 hideTitle?: boolean;170 hideTitle?: boolean;
172 icon?: ReactNode;171 icon?: ReactNode;
173 headerAction?: ReactNode;172 headerAction?: ReactNode;
...@@ -195,11 +194,6 @@ export function SettingsSection({...@@ -195,11 +194,6 @@ export function SettingsSection({
195 {icon}194 {icon}
196 {title}195 {title}
197 </h2>196 </h2>
198 {description ? (
199 <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 text-[13px] leading-[1.45] text-muted-foreground/80">
200 {description}
201 </div>
202 ) : null}
203 </div>197 </div>
204 <div className="flex min-h-7 min-w-7 items-center justify-end">{headerAction}</div>198 <div className="flex min-h-7 min-w-7 items-center justify-end">{headerAction}</div>
205 </div>199 </div>
...@@ -225,6 +219,9 @@ export function SettingsSection({...@@ -225,6 +219,9 @@ export function SettingsSection({
225 * the control goes inert with a tooltip instead of showing an editable219 * the control goes inert with a tooltip instead of showing an editable
226 * default that would never save.220 * default that would never save.
227 *221 *
222 * Keep descriptions short enough for one line where possible. Allow wrapping
223 * for clarity or narrow screens instead of truncating or forcing no-wrap.
224 *
228 * Control sizing across settings follows three tiers so rows share a baseline:225 * Control sizing across settings follows three tiers so rows share a baseline:
229 * - `control` slot: `size="sm"` (Button, Select, Input, NumberField) or `icon-sm`.226 * - `control` slot: `size="sm"` (Button, Select, Input, NumberField) or `icon-sm`.
230 * - Section `headerAction`s and buttons inside list items, cards, toolbars: `xs` / `icon-xs`.227 * - Section `headerAction`s and buttons inside list items, cards, toolbars: `xs` / `icon-xs`.