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

* fix(frontend): truncate selected model names

* test(frontend): scope model selector overflow guard
This commit is contained in:
nonoge 2026-08-29 08:03:29 +08:00 committed by GitHub
parent adfc307677
commit 0cb356858b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 2 deletions

View File

@ -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>

View File

@ -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>

View File

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