fix(frontend): truncate selected model names (#5050)

* fix(frontend): truncate selected model names

* test(frontend): scope model selector overflow guard

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>

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>

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");
+  });
+});