From 0cb356858bc65ee235d4b475aec6cf0f39c83c70 Mon Sep 17 00:00:00 2001
From: nonoge <41133441+zhangbububu@users.noreply.github.com>
Date: Sat, 29 Aug 2026 08:03:29 +0800
Subject: [PATCH] fix(frontend): truncate selected model names (#5050)

* fix(frontend): truncate selected model names

* test(frontend): scope model selector overflow guard
---
 .../src/components/workspace/input-box.tsx    |  2 +-
 .../workspace/sidecar/sidecar-panel.tsx       |  2 +-
 .../workspace/model-selector-overflow.test.ts | 32 +++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 frontend/tests/unit/components/workspace/model-selector-overflow.test.ts

diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index 73b412392..7cb8bfc68 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -2673,7 +2673,7 @@ export function InputBox({
                   className="max-w-40 min-w-0 sm:max-w-56"
                   disabled={composerLocked}
                 >
-                  <div className="flex min-w-0 flex-col items-start text-left">
+                  <div className="flex min-w-0 flex-col text-left">
                     <ModelSelectorName className="text-xs font-normal">
                       {selectedModel?.display_name}
                     </ModelSelectorName>
diff --git a/frontend/src/components/workspace/sidecar/sidecar-panel.tsx b/frontend/src/components/workspace/sidecar/sidecar-panel.tsx
index a399a7710..af271fd15 100644
--- a/frontend/src/components/workspace/sidecar/sidecar-panel.tsx
+++ b/frontend/src/components/workspace/sidecar/sidecar-panel.tsx
@@ -939,7 +939,7 @@ function SidecarModelSelector({
     <ModelSelector open={open} onOpenChange={onOpenChange}>
       <ModelSelectorTrigger asChild>
         <PromptInputButton className={cn("min-w-0 px-2!", className)}>
-          <div className="flex min-w-0 flex-col items-start text-left">
+          <div className="flex min-w-0 flex-col text-left">
             <ModelSelectorName className="truncate text-xs font-normal">
               {selectedModel.display_name}
             </ModelSelectorName>
diff --git a/frontend/tests/unit/components/workspace/model-selector-overflow.test.ts b/frontend/tests/unit/components/workspace/model-selector-overflow.test.ts
new file mode 100644
index 000000000..e8985c96c
--- /dev/null
+++ b/frontend/tests/unit/components/workspace/model-selector-overflow.test.ts
@@ -0,0 +1,32 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+
+import { describe, expect, it } from "@rstest/core";
+
+const FRONTEND_ROOT = path.resolve(__dirname, "../../../..");
+const SELECTED_MODEL_WRAPPER_PATTERN =
+  /<ModelSelectorTrigger asChild>[\s\S]*?<div className="([^"]*)">\s*<ModelSelectorName/;
+
+function source(relativePath: string) {
+  return readFileSync(path.join(FRONTEND_ROOT, relativePath), "utf8");
+}
+
+function selectedModelWrapperClasses(relativePath: string) {
+  return SELECTED_MODEL_WRAPPER_PATTERN.exec(source(relativePath))?.[1]?.split(
+    /\s+/,
+  );
+}
+
+describe("selected model name truncation", () => {
+  it.each([
+    "src/components/workspace/input-box.tsx",
+    "src/components/workspace/sidecar/sidecar-panel.tsx",
+  ])("lets ModelSelectorName stretch in %s", (relativePath) => {
+    const classes = selectedModelWrapperClasses(relativePath);
+
+    expect(classes).toEqual(
+      expect.arrayContaining(["flex", "min-w-0", "flex-col"]),
+    );
+    expect(classes).not.toContain("items-start");
+  });
+});