From 2c3f94f0bab44e83c557efd92aa247458faa5c76 Mon Sep 17 00:00:00 2001
From: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
Date: Wed, 2 Sep 2026 15:20:13 +0800
Subject: [PATCH] fix(app): align add context shortcuts (#46739)

---
 packages/app/component-tests/composer.spec.ts | 17 +++++++++++++++++
 packages/app/src/composer/editor/editor.tsx   |  5 ++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/app/component-tests/composer.spec.ts b/packages/app/component-tests/composer.spec.ts
index c6af7a08cce..d56f256fe47 100644
--- a/packages/app/component-tests/composer.spec.ts
+++ b/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}`)
diff --git a/packages/app/src/composer/editor/editor.tsx b/packages/app/src/composer/editor/editor.tsx
index fecd0703bf0..a2574aa5c3a 100644
--- a/packages/app/src/composer/editor/editor.tsx
+++ b/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>