From 15abc9ea4d9b7ca39a8f3600440005f4f613c806 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Fri, 20 Mar 2026 12:08:57 +0000
Subject: [PATCH] tweak(ui): enlarge close hit targets

---
 .../components/prompt-input/context-items.tsx  | 18 ++++++++++++------
 .../prompt-input/image-attachments.tsx         | 17 ++++++++++-------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/components/prompt-input/context-items.tsx b/packages/app/src/components/prompt-input/context-items.tsx
index 3a75633d46..031e3eb023 100644
--- a/packages/app/src/components/prompt-input/context-items.tsx
+++ b/packages/app/src/components/prompt-input/context-items.tsx
@@ -1,6 +1,6 @@
 import { Component, For, Show, createMemo } from "solid-js"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/util/path"
 import type { ContextItem, ImageAttachmentPart } from "@/context/prompt"
@@ -95,17 +95,23 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                   <Show when={row.item.comment}>
                     {(comment) => <div class="text-12-regular text-text-strong ml-5 truncate">{comment()}</div>}
                   </Show>
-                  <IconButton
+                  <button
                     type="button"
-                    icon="close-small"
-                    variant="ghost"
-                    class="absolute top-1 right-1 size-3.5 text-text-weak hover:text-text-strong opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
+                    class="absolute top-0 right-0 size-6 opacity-0 pointer-events-none transition-opacity group/remove group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
                     onClick={(e) => {
                       e.stopPropagation()
                       props.remove(row.item)
                     }}
                     aria-label={props.t("prompt.context.removeFile")}
-                  />
+                  >
+                    <span class="absolute top-1 right-1 size-3.5 rounded-[var(--radius-sm)] flex items-center justify-center bg-transparent group-hover/remove:bg-surface-base-hover group-active/remove:bg-surface-base-active">
+                      <Icon
+                        name="close-small"
+                        size="small"
+                        class="text-text-weak group-hover/remove:text-text-strong"
+                      />
+                    </span>
+                  </button>
                 </div>
               </Tooltip>
             )
diff --git a/packages/app/src/components/prompt-input/image-attachments.tsx b/packages/app/src/components/prompt-input/image-attachments.tsx
index e4c5d63c2a..c309c7d1e4 100644
--- a/packages/app/src/components/prompt-input/image-attachments.tsx
+++ b/packages/app/src/components/prompt-input/image-attachments.tsx
@@ -1,6 +1,5 @@
 import { Component, Show } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { ImageAttachmentPart } from "@/context/prompt"
 
@@ -22,7 +21,9 @@ const fallbackClass =
   "size-12 rounded-[6px] bg-background-stronger flex items-center justify-center shadow-xs-border cursor-default"
 const imageClass = "size-12 rounded-[6px] object-cover shadow-xs-border"
 const removeClass =
-  "absolute top-1 right-1 size-3.5 text-text-weak hover:text-text-strong opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
+  "absolute top-0 right-0 size-6 opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
+const removeIconClass =
+  "absolute top-1 right-1 size-3.5 rounded-[var(--radius-sm)] flex items-center justify-center bg-transparent group-hover/remove:bg-surface-base-hover group-active/remove:bg-surface-base-active"
 
 export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
   return (
@@ -60,14 +61,16 @@ export const PromptImageAttachment: Component<PromptImageAttachmentProps> = (pro
             onClick={() => props.onOpen(props.attachment)}
           />
         </Show>
-        <IconButton
+        <button
           type="button"
-          icon="close-small"
-          variant="ghost"
-          class={removeClass}
+          class={`${removeClass} group/remove`}
           onClick={() => props.onRemove(props.attachment.id)}
           aria-label={props.removeLabel}
-        />
+        >
+          <span class={removeIconClass}>
+            <Icon name="close-small" size="small" class="text-text-weak group-hover/remove:text-text-strong" />
+          </span>
+        </button>
       </div>
     </Tooltip>
   )