fix(settings): Background Loops page layout overflow and duplicate label (#2693)

Co-authored-by: Ghost Scripter <ghostscripter@zerolend.xyz>
Co-authored-by: M3gA-Mind <megamind@mahadao.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

app/src/components/settings/panels/AIPanel.tsx

@@ -914,24 +914,32 @@ const MetricTile = ({
   value: string;
   detail?: string;
 }) => (
-  <div className="rounded-md bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
-    <div className="text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
+  <div className="min-w-0 overflow-hidden rounded-md bg-stone-50 dark:bg-neutral-800/60 px-3 py-2">
+    <div className="truncate text-[10px] font-semibold uppercase tracking-wide text-stone-400 dark:text-neutral-500">
       {label}
     </div>
-    <div className="mt-1 text-sm font-semibold text-stone-900 dark:text-neutral-100">{value}</div>
+    <div className="mt-1 truncate text-sm font-semibold text-stone-900 dark:text-neutral-100">
+      {value}
+    </div>
     {detail ? (
-      <div className="mt-0.5 text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
+      <div className="mt-0.5 truncate text-[11px] text-stone-500 dark:text-neutral-400">
+        {detail}
+      </div>
     ) : null}
   </div>
 );
 
 const FormulaRow = ({ label, value, detail }: { label: string; value: string; detail: string }) => (
-  <div className="rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
+  <div className="min-w-0 overflow-hidden rounded-md border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2">
     <div className="flex items-center justify-between gap-3">
-      <span className="text-xs font-medium text-stone-800 dark:text-neutral-100">{label}</span>
-      <span className="font-mono text-xs text-stone-600 dark:text-neutral-300">{value}</span>
+      <span className="min-w-0 truncate text-xs font-medium text-stone-800 dark:text-neutral-100">
+        {label}
+      </span>
+      <span className="shrink-0 font-mono text-xs text-stone-600 dark:text-neutral-300">
+        {value}
+      </span>
     </div>
-    <div className="mt-1 text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
+    <div className="mt-1 truncate text-[11px] text-stone-500 dark:text-neutral-400">{detail}</div>
   </div>
 );
 
@@ -1167,7 +1175,7 @@ export const BackgroundLoopControls = ({
   const showHeartbeat = view === 'all' || view === 'heartbeat';
   const showLedger = view === 'all' || view === 'ledger';
   const gridCols =
-    view === 'all' ? 'lg:grid-cols-[minmax(0,1fr)_minmax(300px,0.8fr)]' : 'lg:grid-cols-1';
+    view === 'all' ? 'md:grid-cols-[minmax(0,1fr)_minmax(260px,0.8fr)]' : 'grid-cols-1';
 
   return (
     <div className="space-y-4">
@@ -1237,9 +1245,9 @@ export const BackgroundLoopControls = ({
                       void applyHeartbeatPatch({ notify_meetings: !settings.notify_meetings })
                     }
                   />
-                  <div className="grid gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 md:grid-cols-3">
-                    <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
-                      <span>{t('settings.ai.calendarCap')}</span>
+                  <div className="grid gap-2 rounded-lg border border-stone-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 sm:grid-cols-3">
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
+                      <span className="whitespace-nowrap">{t('settings.ai.calendarCap')}</span>
                       <select
                         value={maxCalendarConnectionsPerTick}
                         disabled={saving === 'max_calendar_connections_per_tick'}
@@ -1256,8 +1264,8 @@ export const BackgroundLoopControls = ({
                         ))}
                       </select>
                     </label>
-                    <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
-                      <span>{t('settings.ai.meetingLookahead')}</span>
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
+                      <span className="whitespace-nowrap">{t('settings.ai.meetingLookahead')}</span>
                       <select
                         value={settings.meeting_lookahead_minutes}
                         disabled={saving === 'meeting_lookahead_minutes'}
@@ -1274,8 +1282,10 @@ export const BackgroundLoopControls = ({
                         ))}
                       </select>
                     </label>
-                    <label className="space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
-                      <span>{t('settings.ai.reminderLookahead')}</span>
+                    <label className="min-w-0 space-y-1 text-xs font-medium text-stone-700 dark:text-neutral-200">
+                      <span className="whitespace-nowrap">
+                        {t('settings.ai.reminderLookahead')}
+                      </span>
                       <select
                         value={settings.reminder_lookahead_minutes}
                         disabled={saving === 'reminder_lookahead_minutes'}
@@ -1379,8 +1389,8 @@ export const BackgroundLoopControls = ({
               <div className="divide-y divide-stone-200 dark:divide-neutral-800">
                 {loops.map(loop => (
                   <div key={loop.name} className="grid gap-2 px-3 py-3 md:grid-cols-[150px_1fr]">
-                    <div>
-                      <div className="text-sm font-medium text-stone-900 dark:text-neutral-100">
+                    <div className="min-w-0">
+                      <div className="truncate text-sm font-medium text-stone-900 dark:text-neutral-100">
                         {loop.name}
                       </div>
                       <div className="mt-0.5 flex flex-wrap gap-1 text-[11px] text-stone-500 dark:text-neutral-400">
@@ -1388,7 +1398,7 @@ export const BackgroundLoopControls = ({
                         <span>{loop.cadence}</span>
                       </div>
                     </div>
-                    <div className="text-xs text-stone-600 dark:text-neutral-300">
+                    <div className="min-w-0 text-xs text-stone-600 dark:text-neutral-300">
                       <div>{loop.work}</div>
                       <div className="mt-1 font-mono text-[11px] text-stone-500 dark:text-neutral-400">
                         {t('settings.ai.routeLabel').replace('{route}', loop.route)}

app/src/lib/i18n/chunks/ar-4.ts

@@ -291,7 +291,7 @@ const ar4: TranslationMap = {
   'settings.ai.clearStoredKey': 'مسح المفتاح المحفوظ',
   'settings.ai.connectProvider': 'ربط مزود',
   'settings.ai.customRouting': 'توجيه مخصص',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'الافتراضي يُحل إلى',
   'settings.ai.discard': 'تجاهل',
   'settings.ai.editProvider': 'تعديل المزود',
   'settings.ai.llmProviders': 'مزودو LLM',

app/src/lib/i18n/chunks/bn-4.ts

@@ -293,7 +293,7 @@ const bn4: TranslationMap = {
   'settings.ai.clearStoredKey': 'সংরক্ষিত কী মুছুন',
   'settings.ai.connectProvider': 'প্রোভাইডার সংযোগ করুন',
   'settings.ai.customRouting': 'কাস্টম রুটিং',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'ডিফল্ট এতে সমাধান হয়',
   'settings.ai.discard': 'বাতিল করুন',
   'settings.ai.editProvider': 'প্রোভাইডার সম্পাদনা করুন',
   'settings.ai.llmProviders': 'LLM প্রোভাইডার',

app/src/lib/i18n/chunks/de-4.ts

@@ -301,7 +301,7 @@ const de4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Gespeicherten Schlüssel löschen',
   'settings.ai.connectProvider': 'Anbieter verbinden',
   'settings.ai.customRouting': 'Benutzerdefiniertes Routing',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'Standard wird aufgelöst zu',
   'settings.ai.discard': 'Verwerfen',
   'settings.ai.editProvider': 'Anbieter bearbeiten',
   'settings.ai.llmProviders': 'LLM Anbieter',

app/src/lib/i18n/chunks/en-4.ts

@@ -310,7 +310,7 @@ const en4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Clear stored key',
   'settings.ai.connectProvider': 'Connect provider',
   'settings.ai.customRouting': 'Custom routing',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'Default resolves to',
   'settings.ai.discard': 'Discard',
   'settings.ai.editProvider': 'Edit provider',
   'settings.ai.llmProviders': 'LLM Providers',

app/src/lib/i18n/chunks/es-4.ts

@@ -297,7 +297,7 @@ const es4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Borrar clave almacenada',
   'settings.ai.connectProvider': 'Conectar proveedor',
   'settings.ai.customRouting': 'Enrutamiento personalizado',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'El valor predeterminado se resuelve a',
   'settings.ai.discard': 'Descartar',
   'settings.ai.editProvider': 'Editar proveedor',
   'settings.ai.llmProviders': 'Proveedores LLM',

app/src/lib/i18n/chunks/fr-4.ts

@@ -296,7 +296,7 @@ const fr4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Effacer la clé stockée',
   'settings.ai.connectProvider': 'Connecter un fournisseur',
   'settings.ai.customRouting': 'Routage personnalisé',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'Par défaut résolu en',
   'settings.ai.discard': 'Annuler',
   'settings.ai.editProvider': 'Modifier le fournisseur',
   'settings.ai.llmProviders': 'Fournisseurs LLM',

app/src/lib/i18n/chunks/hi-4.ts

@@ -294,7 +294,7 @@ const hi4: TranslationMap = {
   'settings.ai.clearStoredKey': 'स्टोर्ड key क्लियर करें',
   'settings.ai.connectProvider': 'प्रदाता कनेक्ट करें',
   'settings.ai.customRouting': 'कस्टम रूटिंग',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'डिफ़ॉल्ट इसमें हल होता है',
   'settings.ai.discard': 'रद्द करें',
   'settings.ai.editProvider': 'प्रदाता संपादित करें',
   'settings.ai.llmProviders': 'LLM प्रोवाइडर',

app/src/lib/i18n/chunks/id-4.ts

@@ -295,7 +295,7 @@ const id4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Hapus key tersimpan',
   'settings.ai.connectProvider': 'Hubungkan penyedia',
   'settings.ai.customRouting': 'Routing kustom',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'Default diarahkan ke',
   'settings.ai.discard': 'Buang',
   'settings.ai.editProvider': 'Edit penyedia',
   'settings.ai.llmProviders': 'Penyedia LLM',

app/src/lib/i18n/chunks/it-4.ts

@@ -297,7 +297,7 @@ const it4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Cancella chiave memorizzata',
   'settings.ai.connectProvider': 'Connetti provider',
   'settings.ai.customRouting': 'Instradamento personalizzato',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'Il valore predefinito si risolve in',
   'settings.ai.discard': 'Scarta',
   'settings.ai.editProvider': 'Modifica provider',
   'settings.ai.llmProviders': 'Provider LLM',

app/src/lib/i18n/chunks/ko-4.ts

@@ -270,7 +270,7 @@ const ko4: TranslationMap = {
   'settings.ai.clearStoredKey': '저장된 키 지우기',
   'settings.ai.connectProvider': '제공업체 연결',
   'settings.ai.customRouting': '사용자 지정 라우팅',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': '기본값은 다음으로 확인됨',
   'settings.ai.discard': '취소',
   'settings.ai.editProvider': '제공업체 편집',
   'settings.ai.llmProviders': 'LLM 제공업체',

app/src/lib/i18n/chunks/pt-4.ts

@@ -296,7 +296,7 @@ const pt4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Limpar chave armazenada',
   'settings.ai.connectProvider': 'Conectar provedor',
   'settings.ai.customRouting': 'Roteamento personalizado',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'O padrão resolve para',
   'settings.ai.discard': 'Descartar',
   'settings.ai.editProvider': 'Editar provedor',
   'settings.ai.llmProviders': 'Provedores LLM',

app/src/lib/i18n/chunks/ru-4.ts

@@ -293,7 +293,7 @@ const ru4: TranslationMap = {
   'settings.ai.clearStoredKey': 'Очистить сохранённый ключ',
   'settings.ai.connectProvider': 'Подключить провайдера',
   'settings.ai.customRouting': 'Пользовательская маршрутизация',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'По умолчанию используется',
   'settings.ai.discard': 'Отменить',
   'settings.ai.editProvider': 'Изменить провайдера',
   'settings.ai.llmProviders': 'LLM-провайдеры',

app/src/lib/i18n/chunks/zh-CN-4.ts

@@ -286,7 +286,7 @@ const zhCN4: TranslationMap = {
   'settings.ai.clearStoredKey': '清除已存储的密钥',
   'settings.ai.connectProvider': '连接 {label}',
   'settings.ai.customRouting': '自定义路由',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': '默认解析为',
   'settings.ai.discard': '放弃',
   'settings.ai.editProvider': '编辑提供商',
   'settings.ai.llmProviders': 'LLM 提供商',

app/src/lib/i18n/en.ts

@@ -2570,7 +2570,7 @@ const en: TranslationMap = {
   'settings.ai.clearStoredKey': 'Clear stored key',
   'settings.ai.connectProvider': 'Connect',
   'settings.ai.customRouting': 'Custom routing',
-  'settings.ai.defaultResolvesTo': 'OpenHuman',
+  'settings.ai.defaultResolvesTo': 'Default resolves to',
   'settings.ai.discard': 'Discard',
   'settings.ai.editProvider': 'Edit {label}',
   'settings.ai.llmProviders': 'LLM Providers',