fix(studio): the open-with menu names the editor as the board does (VS Code) and cuts a long name short instead of spilling out of the menu

desktop/frontend-next/src/design/workbench.css

@@ -274,7 +274,9 @@ svg.studio-icon[data-lang="sheet"] { color: var(--ok); }
 .openwith-menu > button { display: flex; align-items: center; gap: 9px; min-height: 30px; margin: 0 4px; padding: 4px 10px; border-radius: var(--r-sm); font: var(--w-med) var(--fs-ui)/1.3 var(--ui); }
 .openwith-menu > button:hover:not(:disabled) { background: var(--overlay); }
 .openwith-menu > button:disabled { color: var(--faint); }
-.openwith-menu > button > span:not(.openwith-tile) { flex: 1; min-width: 0; text-align: start; }
+.openwith-menu > button > span:not(.openwith-tile) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
+.openwith-menu { max-width: calc(100vw - 24px); }
+.openwith-menu > button > small { flex: none; white-space: nowrap; }
 .openwith-menu > button > small { padding: 0; color: var(--faint); font: var(--w-reg) var(--fs-micro) var(--ui); }
 .openwith-menu > button > .studio-icon { width: 16px; height: 16px; color: var(--faint); }
 .openwith-menu > hr { margin: 4px 0; border: 0; border-top: 1px solid var(--hair); }

desktop/frontend-next/src/ui/openwith_label.ts

@@ -4,6 +4,8 @@ import type { OpenWithTarget } from "../port/hub";
 export function openWithName(target: OpenWithTarget): string {
   if (target.id === "file-manager") return t("workbench.file_manager");
   if (target.id === "terminal") return t("workbench.terminal");
+  // The board writes the editor's short name, which is what the menu has room for.
+  if (target.id === "vscode") return "VS Code";
   return target.name;
 }
 

desktop/frontend-next/src/ui/workspace-open-with.interaction.test.tsx

@@ -39,11 +39,11 @@ const TARGETS: OpenWithTarget[] = [
 it("offers only the programs this machine has, and opens the project in the chosen one", async () => {
   const { openWith } = draw(TARGETS);
   await openMenu();
-  expect(await screen.findByRole("menuitem", { name: /用 Visual Studio Code 打开/ })).toBeTruthy();
+  expect(await screen.findByRole("menuitem", { name: /用 VS Code 打开/ })).toBeTruthy();
   expect(screen.getByRole("menuitem", { name: /用 终端 打开/ })).toBeTruthy();
   expect(screen.queryByRole("menuitem", { name: /Cursor/ })).toBeNull();
 
-  await userEvent.click(screen.getByRole("menuitem", { name: /用 Visual Studio Code 打开/ }));
+  await userEvent.click(screen.getByRole("menuitem", { name: /用 VS Code 打开/ }));
   expect(openWith).toHaveBeenCalledWith("/w", "vscode");
 });
 
@@ -51,7 +51,7 @@ it("shows no entries for a project whose folder is gone, or where no program is
   const gone = draw(TARGETS, { missing: true });
   await openMenu();
   await waitFor(() => expect(gone.openWithTargets).toHaveBeenCalled());
-  expect(screen.getByRole("menuitem", { name: /用 Visual Studio Code 打开/ }).hasAttribute("disabled")).toBe(true);
+  expect(screen.getByRole("menuitem", { name: /用 VS Code 打开/ }).hasAttribute("disabled")).toBe(true);
   cleanup();
   draw([{ id: "vscode", name: "Visual Studio Code", available: false }]);
   await openMenu();

desktop/frontend-next/src/ui/workspace-reveal.interaction.test.tsx

@@ -82,7 +82,7 @@ it("lists the other programs once, in the user's language, and not the file mana
     draw();
     await openMenu();
     await screen.findByRole("menuitem", { name: /用 终端 打开/ });
-    expect(screen.getByRole("menuitem", { name: /用 Visual Studio Code 打开/ })).toBeTruthy();
+    expect(screen.getByRole("menuitem", { name: /用 VS Code 打开/ })).toBeTruthy();
     expect(screen.queryByRole("menuitem", { name: /File manager|Terminal/ })).toBeNull();
     expect(screen.queryByRole("menuitem", { name: /用 文件管理器 打开/ })).toBeNull();
   } finally {