fix(app): update prompt input styling - 14px border radius, card hover states, and 8px padding

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

@@ -1661,7 +1661,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         classList={{
           "group/prompt-input": true,
           "bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
-          "rounded-md overflow-clip focus-within:shadow-xs-border": true,
+          "rounded-[14px] overflow-clip focus-within:shadow-xs-border": true,
           "border-icon-info-active border-dashed": store.dragging,
           [props.class ?? ""]: !!props.class,
         }}
@@ -1681,8 +1681,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 return (
                   <div
                     classList={{
-                      "shrink-0 flex flex-col gap-1 rounded-[6px] bg-surface-base border border-border-base px-2 py-1 max-w-[320px]": true,
-                      "cursor-pointer hover:bg-surface-raised-base-hover": !!item.commentID,
+                      "group shrink-0 flex flex-col gap-1 rounded-[6px] bg-background-stronger border border-border-base pl-2 pr-1 py-1 max-w-[320px]": true,
+                      "cursor-pointer hover:bg-surface-interactive-weak": !!item.commentID,
                     }}
                     onClick={() => {
                       if (!item.commentID) return
@@ -1710,7 +1710,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                         type="button"
                         icon="close"
                         variant="ghost"
-                        class="h-5 w-5"
+                        class="h-5 w-5 opacity-0 group-hover:opacity-100"
                         onClick={(e) => {
                           e.stopPropagation()
                           if (item.commentID) comments.remove(item.path, item.commentID)
@@ -1788,14 +1788,14 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             onKeyDown={handleKeyDown}
             classList={{
               "select-text": true,
-              "w-full px-5 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
+              "w-full px-2 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
               "[&_[data-type=file]]:text-syntax-property": true,
               "[&_[data-type=agent]]:text-syntax-type": true,
               "font-mono!": store.mode === "shell",
             }}
           />
           <Show when={!prompt.dirty()}>
-            <div class="absolute top-0 inset-x-0 px-5 py-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
+            <div class="absolute top-0 inset-x-0 px-2 py-3 pr-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate">
               {store.mode === "shell"
                 ? language.t("prompt.placeholder.shell")
                 : language.t("prompt.placeholder.normal", { example: language.t(EXAMPLES[store.placeholder]) })}