fix(app): align add context shortcuts (#46739)

packages/app/component-tests/composer.spec.ts

@@ -11,6 +11,23 @@ story("raises the docked composer only in dark mode", async ({ mount, page }) =>
   await expect(composer).toHaveCSS("background-color", "rgb(36, 36, 36)")
 })
 
+story("centers add menu shortcuts in a consistent column", async ({ mount, page }) => {
+  const component = await mount("opencode-composer-flow--empty-draft")
+  await component.locator('[data-action="composer-attach"]').click()
+
+  const shortcuts = page.locator('[role="menu"] [data-slot="menu-v2-item-shortcut"]')
+  await expect(shortcuts).toHaveCount(4)
+  const boxes = await shortcuts.evaluateAll((items) =>
+    items.map((item) => {
+      const box = item.getBoundingClientRect()
+      return { width: box.width, center: box.left + box.width / 2 }
+    }),
+  )
+
+  expect(new Set(boxes.map((box) => box.width)).size).toBe(1)
+  expect(new Set(boxes.map((box) => box.center)).size).toBe(1)
+})
+
 for (const draft of ["empty-draft", "multiline-draft", "mixed-attachments"]) {
   story(`select all stays inside the composer with ${draft}`, async ({ mount, page }) => {
     const component = await mount(`opencode-composer-flow--${draft}`)

packages/app/src/composer/editor/editor.tsx

@@ -555,7 +555,10 @@ export function ComposerEditorAddMenu(props: {
           aria-label={props.title}
         />
         <Menu.Portal>
-          <Menu.Content style={{ "min-width": "180px" }}>
+          <Menu.Content
+            class="[&_[data-slot=menu-v2-item-shortcut]]:w-8 [&_[data-slot=menu-v2-item-shortcut]]:justify-center"
+            style={{ "min-width": "180px" }}
+          >
             <Menu.Item onSelect={props.onAttach} shortcut={props.attachShortcut}>
               {props.attachLabel}
             </Menu.Item>