From 2459ce13ffb251c161680d5bc5d03a2f7e1868db Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Fri, 8 May 2026 19:41:03 +0300
Subject: [PATCH] fix(chat): collapse model controls to icon-only on narrow
 widths

Bump @container/model-controls thresholds so labels disappear before
they would ellipsis-truncate. Hide order: agent (< 22rem), variant
(< 14rem), model (< 10rem). VS Code keeps its tighter thresholds.
---
 packages/ui/src/index.css | 44 ++++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 14 deletions(-)

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;