fix(app): copy buttons smaller and out of the way

7 files changed, 33 insertions, 17 deletions

diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index aa550e990..cb5f61f2b 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -120,6 +120,11 @@
     gap: calc(var(--spacing) * 0.5);
   }
 
+  &[data-size="small"] {
+    width: 20px;
+    height: 20px;
+  }
+
   &[data-size="large"] {
     height: 32px;
     /* padding: 0 8px 0 6px; */
diff --git a/packages/ui/src/components/icon-button.tsx b/packages/ui/src/components/icon-button.tsx
index f1832ce7f..89b8b5506 100644
--- a/packages/ui/src/components/icon-button.tsx
+++ b/packages/ui/src/components/icon-button.tsx
@@ -4,7 +4,7 @@ import { Icon, IconProps } from "./icon"
 
 export interface IconButtonProps extends ComponentProps<typeof Kobalte> {
   icon: IconProps["name"]
-  size?: "normal" | "large"
+  size?: "small" | "normal" | "large"
   iconSize?: IconProps["size"]
   variant?: "primary" | "secondary" | "ghost"
 }
diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx
index e3102214b..608db818f 100644
--- a/packages/ui/src/components/markdown.tsx
+++ b/packages/ui/src/components/markdown.tsx
@@ -69,7 +69,7 @@ function createCopyButton(labels: CopyLabels) {
   button.type = "button"
   button.setAttribute("data-component", "icon-button")
   button.setAttribute("data-variant", "secondary")
-  button.setAttribute("data-size", "normal")
+  button.setAttribute("data-size", "small")
   button.setAttribute("data-slot", "markdown-copy-button")
   button.setAttribute("aria-label", labels.copy)
   button.setAttribute("title", labels.copy)
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index 2bef792a2..9a18810dc 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -121,7 +121,7 @@
 
   [data-slot="text-part-copy-wrapper"] {
     position: absolute;
-    top: 8px;
+    top: -28px;
     right: 8px;
     opacity: 0;
     transition: opacity 0.15s ease;
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 7aad01ace..22aeaa3d5 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -425,6 +425,7 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
             >
               <IconButton
                 icon={copied() ? "check" : "copy"}
+                size="small"
                 variant="secondary"
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={(event) => {
@@ -694,6 +695,7 @@ PART_MAPPING["text"] = function TextPartDisplay(props) {
             >
               <IconButton
                 icon={copied() ? "check" : "copy"}
+                size="small"
                 variant="secondary"
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={handleCopy}
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 840fde05f..4b8ba8d7a 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -219,22 +219,28 @@
     gap: 4px;
     align-self: stretch;
 
+    [data-slot="session-turn-summary-title-row"] {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
     [data-slot="session-turn-response"] {
-      position: relative;
       width: 100%;
     }
 
     [data-slot="session-turn-response-copy-wrapper"] {
-      position: absolute;
-      top: 8px;
-      right: 8px;
       opacity: 0;
+      pointer-events: none;
       transition: opacity 0.15s ease;
-      z-index: 1;
     }
 
-    [data-slot="session-turn-response"]:hover [data-slot="session-turn-response-copy-wrapper"] {
+    &:hover [data-slot="session-turn-response-copy-wrapper"],
+    &:focus-within [data-slot="session-turn-response-copy-wrapper"] {
       opacity: 1;
+      pointer-events: auto;
     }
 
     p {
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 7c5694ba5..5c4678701 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -702,14 +702,8 @@ export function SessionTurn(
                     <Show when={!working() && response()}>
                       <div data-slot="session-turn-summary-section">
                         <div data-slot="session-turn-summary-header">
-                          <h2 data-slot="session-turn-summary-title">{i18n.t("ui.sessionTurn.summary.response")}</h2>
-                          <div data-slot="session-turn-response">
-                            <Markdown
-                              data-slot="session-turn-markdown"
-                              data-diffs={hasDiffs()}
-                              text={response() ?? ""}
-                              cacheKey={responsePartId()}
-                            />
+                          <div data-slot="session-turn-summary-title-row">
+                            <h2 data-slot="session-turn-summary-title">{i18n.t("ui.sessionTurn.summary.response")}</h2>
                             <Show when={response()}>
                               <div data-slot="session-turn-response-copy-wrapper">
                                 <Tooltip
@@ -719,6 +713,7 @@ export function SessionTurn(
                                 >
                                   <IconButton
                                     icon={copied() ? "check" : "copy"}
+                                    size="small"
                                     variant="secondary"
                                     onMouseDown={(e) => e.preventDefault()}
                                     onClick={(event) => {
@@ -731,6 +726,14 @@ export function SessionTurn(
                               </div>
                             </Show>
                           </div>
+                          <div data-slot="session-turn-response">
+                            <Markdown
+                              data-slot="session-turn-markdown"
+                              data-diffs={hasDiffs()}
+                              text={response() ?? ""}
+                              cacheKey={responsePartId()}
+                            />
+                          </div>
                         </div>
                       </div>
                     </Show>