From 4ad8727c42d8fd41c1a75fe047cb6a16f0292d9d Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 22 May 2026 15:59:16 +0000
Subject: [PATCH] Keep markdown wrap action beside copy

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/MarkdownBody.test.tsx |  2 ++
 ui/src/components/MarkdownBody.tsx      | 43 ++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/MarkdownBody.test.tsx b/ui/src/components/MarkdownBody.test.tsx
index ebb463490be..dd92af4b6d8 100644
--- a/ui/src/components/MarkdownBody.test.tsx
+++ b/ui/src/components/MarkdownBody.test.tsx
@@ -450,8 +450,10 @@ describe("MarkdownBody", () => {
 
     expect(html).toContain("paperclip-markdown-codeblock");
     expect(html).toContain("paperclip-markdown-codeblock-actions");
+    expect(html).toContain("position:absolute;top:0.4rem;right:0.4rem;display:inline-flex");
     expect(html).toContain("paperclip-markdown-codeblock-wrap");
     expect(html).toContain('aria-label="Wrap lines"');
+    expect(html).toContain("position:static;opacity:1;display:inline-flex");
     expect(html).toContain("paperclip-markdown-codeblock-copy");
     expect(html).toContain('aria-label="Copy code"');
     expect(html).toContain("lucide-copy");
diff --git a/ui/src/components/MarkdownBody.tsx b/ui/src/components/MarkdownBody.tsx
index 8c81de26829..5d4fd88649f 100644
--- a/ui/src/components/MarkdownBody.tsx
+++ b/ui/src/components/MarkdownBody.tsx
@@ -84,6 +84,39 @@ const scrollableBlockStyle: React.CSSProperties = {
   overflowX: "auto",
 };
 
+const codeBlockActionsStyle: React.CSSProperties = {
+  position: "absolute",
+  top: "0.4rem",
+  right: "0.4rem",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+};
+
+const codeBlockActionStyle: React.CSSProperties = {
+  position: "static",
+  opacity: 1,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.25rem",
+  minHeight: "1.55rem",
+  padding: "0.2rem 0.4rem",
+  borderRadius: "calc(var(--radius) - 4px)",
+  border: "1px solid color-mix(in oklab, var(--foreground) 14%, transparent)",
+  backgroundColor: "color-mix(in oklab, var(--muted) 92%, var(--background) 8%)",
+  color: "var(--muted-foreground)",
+  fontSize: "0.7rem",
+  lineHeight: 1,
+  cursor: "pointer",
+};
+
+const codeBlockWrapActionStyle: React.CSSProperties = {
+  ...codeBlockActionStyle,
+  width: "1.55rem",
+  paddingInline: 0,
+};
+
 const tableCellWrapStyle: React.CSSProperties = {
   overflowWrap: "anywhere",
   wordBreak: "normal",
@@ -426,6 +459,7 @@ function CodeBlock({
       </pre>
       <div
         className="paperclip-markdown-codeblock-actions"
+        style={codeBlockActionsStyle}
         data-active={copied || failed || wrapLines || undefined}
       >
         <button
@@ -434,11 +468,17 @@ function CodeBlock({
           aria-label={wrapLabel}
           title={wrapLabel}
           className="paperclip-markdown-codeblock-action paperclip-markdown-codeblock-wrap"
+          style={wrapLines
+            ? {
+                ...codeBlockWrapActionStyle,
+                borderColor: "color-mix(in oklab, var(--primary) 38%, transparent)",
+                color: "var(--primary)",
+              }
+            : codeBlockWrapActionStyle}
           aria-pressed={wrapLines}
           data-active={wrapLines || undefined}
         >
           <WrapText aria-hidden="true" className="h-3.5 w-3.5" />
-          <span className="paperclip-markdown-codeblock-action-label">{wrapLabel}</span>
         </button>
         <button
           type="button"
@@ -446,6 +486,7 @@ function CodeBlock({
           aria-label="Copy code"
           title={copyLabel}
           className="paperclip-markdown-codeblock-action paperclip-markdown-codeblock-copy"
+          style={codeBlockActionStyle}
           data-copied={copied || undefined}
           data-failed={failed || undefined}
         >