fix: prevent copy button overlap with long text in JsonView (fixes #769)

client/e2e/json-view-copy-button.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from "@playwright/test";
+
+const APP_URL = "http://localhost:6274/";
+
+test.describe("JsonView Copy Button", () => {
+  test("copy button should not overlap with long text content", async ({
+    page,
+  }) => {
+    // Navigate to tools tab which uses JsonView
+    await page.goto(`${APP_URL}#tools`);
+
+    // Wait for the tools tab to be visible
+    await page.waitForSelector('[role="tabpanel"][data-state="active"]');
+
+    // Select a tool and run it to generate output
+    await page.click("text=List Tools");
+    await page.waitForSelector(".font-mono"); // Wait for JsonView to render
+
+    // Get the content area and copy button positions
+    const contentBox = await page.locator(".font-mono").boundingBox();
+    const copyButton = await page
+      .locator("button:has(svg)")
+      .first()
+      .boundingBox();
+
+    if (contentBox && copyButton) {
+      // Verify button doesn't overlap with content area
+      expect(contentBox.x + contentBox.width).toBeLessThan(copyButton.x);
+    }
+  });
+});

client/src/components/JsonView.tsx

@@ -69,7 +69,7 @@ const JsonView = memo(
             )}
           </Button>
         )}
-        <div className="font-mono text-sm transition-all duration-300">
+        <div className="font-mono text-sm transition-all duration-300 pr-12">
           <JsonNode
             data={normalizedData as JsonValue}
             name={name}

client/src/components/__tests__/JsonView.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, expect } from "@jest/globals";
+import JsonView from "../JsonView";
+
+describe("JsonView", () => {
+  it("should have padding to prevent copy button overlap", () => {
+    const longText =
+      "This is a very long text that would normally flow under the copy button without proper padding applied to the content area";
+
+    const { container } = render(
+      <JsonView data={longText} withCopyButton={true} />,
+    );
+
+    // Check that the content div has right padding
+    const contentDiv = container.querySelector(".font-mono");
+    expect(contentDiv).toHaveClass("pr-12");
+  });
+
+  it("should render without copy button when withCopyButton is false", () => {
+    render(<JsonView data="test" withCopyButton={false} />);
+
+    // Copy button should not be present
+    const copyButton = screen.queryByRole("button");
+    expect(copyButton).not.toBeInTheDocument();
+  });
+});