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

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"

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}

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)}>

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`.