From 53d3b304d339af011ad475bd15d2c674e7c68efd Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 8 Jul 2026 10:17:01 +0530
Subject: [PATCH] refactor(playground): improve API reference and playground
 runner UI

- Adjusted text formatting in the API reference for better readability.
- Simplified import statements in PlaygroundRunner for cleaner code.
- Enhanced button styling and layout in PlaygroundRunner for improved user experience.
- Streamlined output display logic in PlaygroundRunner for better clarity.
---
 .../playground/components/api-reference.tsx   |  5 ++--
 .../components/playground-runner.tsx          | 24 +++++--------------
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx
index beed5d525..05434b953 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-reference.tsx
@@ -91,12 +91,13 @@ export function ApiReference({
 			<div>
 				<h2 className="text-base font-semibold">API reference</h2>
 				<p className="mt-1 text-sm text-muted-foreground">
-					Create an API key, enable API access for this workspace, then use the examples below to call this endpoint.
+					Create an API key, enable API access for this workspace, then use the examples below to
+					call this endpoint.
 				</p>
 			</div>
 
 			<Tabs defaultValue="curl">
-				<TabsList className="h-auto flex-wrap">
+				<TabsList className="flex h-auto w-full flex-nowrap justify-start overflow-x-auto overflow-y-hidden">
 					{snippets.map((snippet) => (
 						<TabsTrigger key={snippet.id} value={snippet.id}>
 							{snippet.label}
diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-runner.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-runner.tsx
index f62ffc312..6b426b196 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-runner.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-runner.tsx
@@ -1,13 +1,6 @@
 "use client";
 
-import {
-	Check,
-	Copy,
-	Hash,
-	Info,
-	Coins,
-	Timer,
-} from "lucide-react";
+import { Check, Coins, Copy, Hash, Info, Timer } from "lucide-react";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -99,9 +92,9 @@ function EndpointCopyButton({ endpoint }: { endpoint: string }) {
 			variant="ghost"
 			size="sm"
 			onClick={handleCopy}
-			className="h-auto justify-start gap-2 rounded bg-muted/40 px-2 py-1 font-mono text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+			className="h-auto max-w-full items-start justify-start gap-2 whitespace-normal rounded bg-muted/40 px-2 py-1 font-mono text-xs text-muted-foreground hover:bg-muted hover:text-foreground sm:whitespace-nowrap"
 		>
-			<code>{endpoint}</code>
+			<code className="min-w-0 break-all text-left sm:break-normal">{endpoint}</code>
 			{copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
 			<span className="sr-only">{copied ? "Copied endpoint" : "Copy endpoint"}</span>
 		</Button>
@@ -243,8 +236,8 @@ export function PlaygroundRunner({ workspaceId, platform, verb }: PlaygroundRunn
 											className="font-medium text-foreground underline-offset-4 hover:underline"
 										>
 											Read docs
-										</Link>
-										{" "}for more info.
+										</Link>{" "}
+										for more info.
 									</>
 								) : null}
 							</p>
@@ -280,17 +273,12 @@ export function PlaygroundRunner({ workspaceId, platform, verb }: PlaygroundRunn
 							</Button>
 						)}
 					</div>
-
 				</div>
 
 				<div className="space-y-3">
 					<h2 className="text-sm font-medium text-muted-foreground">Output</h2>
 					{isRunning ? (
-						<RunProgressPanel
-							latest={run.latest}
-							events={run.events}
-							elapsedMs={run.elapsedMs}
-						/>
+						<RunProgressPanel latest={run.latest} events={run.events} elapsedMs={run.elapsedMs} />
 					) : run.status === "cancelled" ? (
 						<div className="flex h-64 items-center justify-center rounded-md border border-border/60 px-4 text-center text-sm text-muted-foreground">
 							Run cancelled.