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({
2828 const updateSettings = useUpdateClientSettings();
2929
3030 return (
31 <SettingsSection
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 >
31 <SettingsSection {...searchableSetting("load-balancing")}>
3532 <SettingsRow
3633 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."
3835 control={
3936 <Switch
4037 aria-label="Automatically balance load"
apps/web/src/components/settings/ProviderInstanceCard.tsx+4-6
......@@ -801,14 +801,12 @@ export function ProviderInstanceCard({
801801
802802 return (
803803 <>
804 <SettingsSection
805 title={displayName}
806 description={editorStatusNode}
807 icon={titleIconNode}
808 headerAction={editorHeaderAction}
809 >
804 <SettingsSection title={displayName} icon={titleIconNode} headerAction={editorHeaderAction}>
810805 <SettingsRow
811806 title="Display name"
807 status={
808 <div className="flex min-w-0 flex-wrap items-center gap-x-1.5">{editorStatusNode}</div>
809 }
812810 control={
813811 <div
814812 inert={readOnly}
apps/web/src/components/settings/UsageProviderSettings.tsx-1
......@@ -37,7 +37,6 @@ export function UsageProviderSettings({
3737 <>
3838 <SettingsSection
3939 {...searchableSetting("usage-providers")}
40 description="Connect a CLIProxyAPI hub to show its accounts on Usage → Limits."
4140 headerAction={
4241 !readOnly ? (
4342 <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) {
155155 return nowMs;
156156}
157157
158/** Muted section headings have no descriptions; explanatory copy belongs to individual settings. */
158159export function SettingsSection({
159160 title,
160 description,
161161 hideTitle = false,
162162 icon,
163163 headerAction,
......@@ -167,7 +167,6 @@ export function SettingsSection({
167167 ...sectionProps
168168}: ComponentPropsWithoutRef<"section"> & {
169169 title: string;
170 description?: ReactNode;
171170 hideTitle?: boolean;
172171 icon?: ReactNode;
173172 headerAction?: ReactNode;
......@@ -195,11 +194,6 @@ export function SettingsSection({
195194 {icon}
196195 {title}
197196 </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}
203197 </div>
204198 <div className="flex min-h-7 min-w-7 items-center justify-end">{headerAction}</div>
205199 </div>
......@@ -225,6 +219,9 @@ export function SettingsSection({
225219 * the control goes inert with a tooltip instead of showing an editable
226220 * default that would never save.
227221 *
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 *
228225 * Control sizing across settings follows three tiers so rows share a baseline:
229226 * - `control` slot: `size="sm"` (Button, Select, Input, NumberField) or `icon-sm`.
230227 * - Section `headerAction`s and buttons inside list items, cards, toolbars: `xs` / `icon-xs`.