tweak(ui): align attachment and chip close buttons

packages/app/src/components/prompt-input/context-items.tsx

@@ -76,7 +76,7 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
               >
                 <div
                   classList={{
-                    "group flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                    "group relative flex flex-col rounded-[6px] pl-2 pr-7 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
                     "hover:bg-surface-interactive-weak": !!row.item.commentID && !selected,
                     "bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover": selected,
                     "bg-background-stronger": !selected,
@@ -97,21 +97,21 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                         )}
                       </Show>
                     </div>
-                    <IconButton
-                      type="button"
-                      icon="close-small"
-                      variant="ghost"
-                      class="ml-auto 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"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        props.remove(row.item)
-                      }}
-                      aria-label={props.t("prompt.context.removeFile")}
-                    />
                   </div>
                   <Show when={row.item.comment}>
-                    {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
+                    {(comment) => <div class="text-12-regular text-text-strong ml-5 truncate">{comment()}</div>}
                   </Show>
+                  <IconButton
+                    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"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      props.remove(row.item)
+                    }}
+                    aria-label={props.t("prompt.context.removeFile")}
+                  />
                 </div>
               </Tooltip>
             )

packages/app/src/components/prompt-input/image-attachments.tsx

@@ -1,5 +1,6 @@
 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"
 
@@ -21,7 +22,7 @@ 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.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
+  "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"
 
 export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
   return (
@@ -59,14 +60,14 @@ export const PromptImageAttachment: Component<PromptImageAttachmentProps> = (pro
             onClick={() => props.onOpen(props.attachment)}
           />
         </Show>
-        <button
+        <IconButton
           type="button"
-          onClick={() => props.onRemove(props.attachment.id)}
+          icon="close-small"
+          variant="ghost"
           class={removeClass}
+          onClick={() => props.onRemove(props.attachment.id)}
           aria-label={props.removeLabel}
-        >
-          <Icon name="close" class="size-3 text-text-weak" />
-        </button>
+        />
       </div>
     </Tooltip>
   )