From cf9a9a3682b5ffc982d2850b28d10634407f16cd Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Wed, 29 Jul 2026 02:35:30 -0700
Subject: [PATCH] Studio: let the GPU readings truncate instead of overflowing

The three figures carry truncate but sit in a flex row, where the
default min-width:auto stops an item shrinking below its text. The
longest locales would push past the block rather than ellipsize.
---
 .../src/features/settings/tabs/resources-tab.tsx         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/studio/frontend/src/features/settings/tabs/resources-tab.tsx b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
index e5ed0e0fc5..1a6eb5abbb 100644
--- a/studio/frontend/src/features/settings/tabs/resources-tab.tsx
+++ b/studio/frontend/src/features/settings/tabs/resources-tab.tsx
@@ -525,16 +525,19 @@ export function ResourcesTab() {
                 <div className="flex w-[392px] shrink-0 flex-col items-stretch gap-2.5 max-[992px]:w-full">
                   {/* Ruled between the three readings: run together they are
                       easy to misread as one number. */}
+                  {/* min-w-0 on each reading, or truncate cannot fire: a flex
+                      item defaults to min-width:auto and the longest locales
+                      would push past the block instead of ellipsizing. */}
                   <div className="flex items-center justify-between gap-3 font-mono text-ui-11 tabular-nums text-muted-foreground">
-                    <span className="truncate">
+                    <span className="min-w-0 truncate">
                       {t("settings.resources.gpu.used", { value: usedText })}
                     </span>
                     <span aria-hidden className="h-3 w-px shrink-0 bg-border" />
-                    <span className="truncate">
+                    <span className="min-w-0 truncate">
                       {t("settings.resources.gpu.free", { value: freeText })}
                     </span>
                     <span aria-hidden className="h-3 w-px shrink-0 bg-border" />
-                    <span className="truncate">
+                    <span className="min-w-0 truncate">
                       {t("settings.resources.gpu.total", {
                         value: totalText,
                       })}