From dca73ba9e3782e2b41983faca5854a9d56a3c482 Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Thu, 24 Sep 2026 15:58:30 +1000
Subject: [PATCH] fix(app): show composer attachment remove buttons on touch
 devices (#51047)

---
 packages/app/component-tests/composer.spec.ts | 17 +++++++++++++++++
 packages/app/src/composer/editor/editor.tsx   |  6 +++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/app/component-tests/composer.spec.ts b/packages/app/component-tests/composer.spec.ts
index 9571712d5ad..a6973e2d252 100644
--- a/packages/app/component-tests/composer.spec.ts
+++ b/packages/app/component-tests/composer.spec.ts
@@ -214,6 +214,23 @@ for (const draft of ["empty-draft", "multiline-draft", "mixed-attachments"]) {
   })
 }
 
+story.describe("touch attachments", () => {
+  story.use({ hasTouch: true, isMobile: true, viewport: { width: 390, height: 844 } })
+
+  story("keeps attachment remove buttons visible without hover", async ({ mount, page }) => {
+    const component = await mount("opencode-composer-flow--mixed-attachments")
+    expect(await page.evaluate(() => matchMedia("(hover: none)").matches)).toBe(true)
+
+    const remove = component.getByRole("button", { name: "Remove attachment", exact: true })
+    await expect(remove).not.toHaveCount(0)
+    for (const button of await remove.all()) await expect(button).toHaveCSS("opacity", "1")
+
+    const count = await remove.count()
+    await remove.first().tap()
+    await expect(remove).toHaveCount(count - 1)
+  })
+})
+
 story("renders a draft once and supports editing, caret restoration, and failure recovery", async ({ mount, page }) => {
   await page.addInitScript(() => {
     const replace = Element.prototype.replaceChildren
diff --git a/packages/app/src/composer/editor/editor.tsx b/packages/app/src/composer/editor/editor.tsx
index a6f260db1c4..bec7da700e2 100644
--- a/packages/app/src/composer/editor/editor.tsx
+++ b/packages/app/src/composer/editor/editor.tsx
@@ -542,7 +542,7 @@ export function ComposerAttachments(props: {
                 <button
                   type="button"
                   onClick={() => props.onCommentRemove?.(comment)}
-                  class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                  class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center hover-reveal group-hover:opacity-100"
                   aria-label={props.removeLabel}
                 >
                   <Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />
@@ -589,7 +589,7 @@ export function ComposerAttachments(props: {
                 <button
                   type="button"
                   onClick={() => props.onAttachmentRemove(attachment)}
-                  class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                  class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center hover-reveal group-hover:opacity-100"
                   aria-label={props.removeLabel}
                 >
                   <Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />
@@ -611,7 +611,7 @@ export function ComposerAttachments(props: {
                 <button
                   type="button"
                   onClick={() => props.onUploadCancel?.(upload)}
-                  class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                  class="absolute -top-1 -end-1 size-4 rounded-full bg-v2-icon-icon-muted outline-solid outline-1 outline-v2-icon-icon-contrast flex items-center justify-center hover-reveal group-hover:opacity-100"
                   aria-label={i18n.t("ui.promptInput.cancelUpload")}
                 >
                   <Icon name="outline-xmark" class="text-v2-icon-icon-contrast" />