From ec5bb5d5ead14bdf84d77664f7bd46195586c2ba Mon Sep 17 00:00:00 2001
From: 777genius <quantjumppro@gmail.com>
Date: Mon, 25 May 2026 23:44:06 +0300
Subject: [PATCH] fix(runtime): prevent provider status label overflow

---
 src/renderer/components/dashboard/CliStatusBanner.tsx  | 10 +++++-----
 .../components/settings/sections/CliStatusSection.tsx  |  7 ++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/dashboard/CliStatusBanner.tsx b/src/renderer/components/dashboard/CliStatusBanner.tsx
index acd87928..b5ee70a6 100644
--- a/src/renderer/components/dashboard/CliStatusBanner.tsx
+++ b/src/renderer/components/dashboard/CliStatusBanner.tsx
@@ -1036,14 +1036,14 @@ const InstalledBanner = ({
               >
                 <div className="col-span-2 flex items-start justify-between gap-3">
                   <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <span className="flex items-center gap-2">
+                    <div className="flex min-w-0 flex-wrap items-center gap-2">
+                      <span className="flex min-w-0 items-center gap-2">
                         <ProviderBrandLogo
                           providerId={provider.providerId}
                           className="size-4 shrink-0"
                         />
                         <span
-                          className="text-xs font-medium"
+                          className="truncate whitespace-nowrap text-xs font-medium"
                           style={{ color: 'var(--color-text)' }}
                         >
                           {provider.providerId === 'opencode'
@@ -1053,7 +1053,7 @@ const InstalledBanner = ({
                         {openCodeDashboardChips.map((chip) => (
                           <span
                             key={chip.label}
-                            className="rounded bg-[rgba(34,197,94,0.14)] px-1.5 py-px text-[9px] font-medium uppercase tracking-[0.06em] text-[rgb(74,222,128)]"
+                            className="shrink-0 whitespace-nowrap rounded bg-[rgba(34,197,94,0.14)] px-1.5 py-px text-[9px] font-medium uppercase tracking-[0.06em] text-[rgb(74,222,128)]"
                             title={chip.title}
                           >
                             {chip.label}
@@ -1061,7 +1061,7 @@ const InstalledBanner = ({
                         ))}
                       </span>
                       <span
-                        className="text-xs"
+                        className="whitespace-nowrap text-xs"
                         style={{
                           color: getProviderStatusColor(statusText, provider.authenticated),
                         }}
diff --git a/src/renderer/components/settings/sections/CliStatusSection.tsx b/src/renderer/components/settings/sections/CliStatusSection.tsx
index c6e4c986..ce5c61b4 100644
--- a/src/renderer/components/settings/sections/CliStatusSection.tsx
+++ b/src/renderer/components/settings/sections/CliStatusSection.tsx
@@ -534,20 +534,21 @@ export const CliStatusSection = (): React.JSX.Element | null => {
                             <>
                               <div className="col-span-2 flex items-start justify-between gap-3">
                                 <div className="min-w-0 flex-1">
-                                  <div className="flex items-center gap-2 text-xs">
-                                    <span className="flex items-center gap-2">
+                                  <div className="flex min-w-0 flex-wrap items-center gap-2 text-xs">
+                                    <span className="flex min-w-0 items-center gap-2">
                                       <ProviderBrandLogo
                                         providerId={provider.providerId}
                                         className="size-4 shrink-0"
                                       />
                                       <span
-                                        className="font-medium"
+                                        className="truncate whitespace-nowrap font-medium"
                                         style={{ color: 'var(--color-text-secondary)' }}
                                       >
                                         {provider.displayName}
                                       </span>
                                     </span>
                                     <span
+                                      className="whitespace-nowrap"
                                       style={{
                                         color: getProviderStatusColor(
                                           statusText,