From 45387700bf49401fd9de4f2db36575e50f9649eb Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Sun, 6 Sep 2026 20:24:28 -0300
Subject: [PATCH] fix(web): keep settings section headings description-free
 (#10415)

---
 .../src/components/settings/LoadBalancingSettings.tsx |  7 ++-----
 .../src/components/settings/ProviderInstanceCard.tsx  | 10 ++++------
 .../src/components/settings/UsageProviderSettings.tsx |  1 -
 apps/web/src/components/settings/settingsLayout.tsx   | 11 ++++-------
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/settings/LoadBalancingSettings.tsx b/apps/web/src/components/settings/LoadBalancingSettings.tsx
index 514b146c3bac80b06b1d22326aa4adef47fab983..b4657b71387e8946a51f7547751976693cbc38b0 100644
--- a/apps/web/src/components/settings/LoadBalancingSettings.tsx
+++ b/apps/web/src/components/settings/LoadBalancingSettings.tsx
@@ -28,13 +28,10 @@ export function LoadBalancingSettings({
   const updateSettings = useUpdateClientSettings();
 
   return (
-    <SettingsSection
-      {...searchableSetting("load-balancing")}
-      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."
-    >
+    <SettingsSection {...searchableSetting("load-balancing")}>
       <SettingsRow
         title="Automatically balance load"
-        description="Automatically choose a connected machine for new threads in shared projects. You can choose a machine in the composer."
+        description="Choose a machine automatically for new threads in shared projects."
         control={
           <Switch
             aria-label="Automatically balance load"
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index 327b48c2d44a2fc588afb2f7cc967fb8c583dc63..7b386e062c1883a97faddd0cfea1c49beb084ba4 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -801,14 +801,12 @@ export function ProviderInstanceCard({
 
   return (
     <>
-      <SettingsSection
-        title={displayName}
-        description={editorStatusNode}
-        icon={titleIconNode}
-        headerAction={editorHeaderAction}
-      >
+      <SettingsSection title={displayName} icon={titleIconNode} headerAction={editorHeaderAction}>
         <SettingsRow
           title="Display name"
+          status={
+            <div className="flex min-w-0 flex-wrap items-center gap-x-1.5">{editorStatusNode}</div>
+          }
           control={
             <div
               inert={readOnly}
diff --git a/apps/web/src/components/settings/UsageProviderSettings.tsx b/apps/web/src/components/settings/UsageProviderSettings.tsx
index e7af8337d961dcf51e3fe8e500d9ca1e4e35c561..cf2887f39684a2a9cb4a22566e2842c131a07e40 100644
--- a/apps/web/src/components/settings/UsageProviderSettings.tsx
+++ b/apps/web/src/components/settings/UsageProviderSettings.tsx
@@ -37,7 +37,6 @@ export function UsageProviderSettings({
     <>
       <SettingsSection
         {...searchableSetting("usage-providers")}
-        description="Connect a CLIProxyAPI hub to show its accounts on Usage → Limits."
         headerAction={
           !readOnly ? (
             <Button size="xs" variant="outline" onClick={() => setAdding(true)}>
diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index 1bfa8c87146e218dbbd7b34e1707c8222861fb8a..24660734075133c13dabbe3673325493f10f7068 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -155,9 +155,9 @@ export function useRelativeTimeTick(intervalMs = 1_000) {
   return nowMs;
 }
 
+/** Muted section headings have no descriptions; explanatory copy belongs to individual settings. */
 export function SettingsSection({
   title,
-  description,
   hideTitle = false,
   icon,
   headerAction,
@@ -167,7 +167,6 @@ export function SettingsSection({
   ...sectionProps
 }: ComponentPropsWithoutRef<"section"> & {
   title: string;
-  description?: ReactNode;
   hideTitle?: boolean;
   icon?: ReactNode;
   headerAction?: ReactNode;
@@ -195,11 +194,6 @@ export function SettingsSection({
               {icon}
               {title}
             </h2>
-            {description ? (
-              <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 text-[13px] leading-[1.45] text-muted-foreground/80">
-                {description}
-              </div>
-            ) : null}
           </div>
           <div className="flex min-h-7 min-w-7 items-center justify-end">{headerAction}</div>
         </div>
@@ -225,6 +219,9 @@ export function SettingsSection({
  * the control goes inert with a tooltip instead of showing an editable
  * default that would never save.
  *
+ * Keep descriptions short enough for one line where possible. Allow wrapping
+ * for clarity or narrow screens instead of truncating or forcing no-wrap.
+ *
  * Control sizing across settings follows three tiers so rows share a baseline:
  * - `control` slot: `size="sm"` (Button, Select, Input, NumberField) or `icon-sm`.
  * - Section `headerAction`s and buttons inside list items, cards, toolbars: `xs` / `icon-xs`.
-- 
2.54.0