diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index ac55671d..5481f922 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -711,26 +711,42 @@ html:not(.dark) .chat-scroll {
   font-size: inherit !important;
 }
 
-/* Model/agent controls: agent label hides before model label. */
+/* Model/agent controls: progressively collapse labels to icon-only as the row narrows.
+   Hide priority (most aggressive first → most resilient last): agent, variant, model. */
+
+/* Desktop (non-VSCode): pick thresholds that fire BEFORE the per-label `max-w-[Xpx]`
+   constraints would truncate text with an ellipsis. */
+@container model-controls (max-width: 22rem) {
+  :root:not(.vscode-runtime) .model-controls__agent-label {
+    display: none;
+  }
+}
+
+@container model-controls (max-width: 14rem) {
+  :root:not(.vscode-runtime) .model-controls__variant-label {
+    display: none;
+  }
+}
+
+@container model-controls (max-width: 10rem) {
+  :root:not(.vscode-runtime) .model-controls__model-label {
+    display: none;
+  }
+}
+
+/* VS Code side panel: tighter thresholds since the panel is narrow and labels are smaller. */
 @container model-controls (max-width: 11rem) {
-  .model-controls__agent-label {
-    display: none;
-  }
-}
-
-@container model-controls (max-width: 9rem) {
-  .model-controls__model-label {
-    display: none;
-  }
-}
-
-/* VS Code side panel: collapse earlier to save horizontal space. */
-@container model-controls (max-width: 9rem) {
   :root.vscode-runtime .model-controls__agent-label {
     display: none;
   }
 }
 
+@container model-controls (max-width: 9rem) {
+  :root.vscode-runtime .model-controls__variant-label {
+    display: none;
+  }
+}
+
 @container model-controls (max-width: 10rem) {
   :root.vscode-runtime .model-controls__model-label {
     display: none;