From 58b26af1e0b237146414dce7883bf258c561c110 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 7 Jul 2026 22:29:16 +0530
Subject: [PATCH] feat(playground): update header styles for improved visual
 consistency

- Enhanced header styles across Playground components to include text-foreground and responsive sizing.
- Updated API Playground, API Keys, Runs Table, and other sections for a unified look and feel.
- Improved accessibility and readability with consistent font sizes and colors.
---
 .../[workspace_id]/playground/components/api-keys-section.tsx | 2 +-
 .../[workspace_id]/playground/components/playground-index.tsx | 2 +-
 .../playground/components/playground-runner.tsx               | 2 +-
 .../[workspace_id]/playground/components/runs-table.tsx       | 2 +-
 .../app/dashboard/[workspace_id]/playground/layout-shell.tsx  | 4 +++-
 .../dashboard/[workspace_id]/user-settings/layout-shell.tsx   | 4 +++-
 .../[workspace_id]/workspace-settings/layout-shell.tsx        | 4 +++-
 7 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx
index e3df313f0..2e1f272e9 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/api-keys-section.tsx
@@ -50,7 +50,7 @@ export function ApiKeysSection({ workspaceId }: { workspaceId: number }) {
 	return (
 		<div className="space-y-6">
 			<div>
-				<h1 className="text-xl font-semibold">API Keys</h1>
+				<h1 className="text-xl font-semibold text-foreground md:text-2xl">API Keys</h1>
 				<p className="mt-1 text-sm text-muted-foreground">
 					Enable API access for this workspace and manage the keys that use it.
 				</p>
diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx
index 741ed291f..80b7e841f 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/playground-index.tsx
@@ -21,7 +21,7 @@ export function PlaygroundIndex({ workspaceId }: { workspaceId: number }) {
 	return (
 		<div className="space-y-8">
 			<div>
-				<h1 className="text-xl font-semibold">API Playground</h1>
+				<h1 className="text-xl font-semibold text-foreground md:text-2xl">API Playground</h1>
 				<p className="mt-1 text-sm text-muted-foreground">
 					Manually run SurfSense's platform-native APIs and inspect their output. Every run is
 					captured under Runs.
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 3b76a7d09..effce913b 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
@@ -189,7 +189,7 @@ export function PlaygroundRunner({ workspaceId, platform, verb }: PlaygroundRunn
 			<div className="grid gap-6 lg:grid-cols-2">
 				<div className="space-y-5">
 					<div>
-						<h1 className="text-lg font-semibold">
+						<h1 className="text-xl font-semibold text-foreground md:text-2xl">
 							{catalogVerb.label} <span className="text-muted-foreground">· {platform}</span>
 						</h1>
 						{capability.description && (
diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx
index f47bd4572..17508c0ff 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/components/runs-table.tsx
@@ -68,7 +68,7 @@ export function RunsTable({ workspaceId }: { workspaceId: number }) {
 	return (
 		<div className="space-y-4">
 			<div>
-				<h1 className="text-xl font-semibold">Runs</h1>
+				<h1 className="text-xl font-semibold text-foreground md:text-2xl">Runs</h1>
 				<p className="mt-1 text-sm text-muted-foreground">
 					Every platform-native API run in this workspace — from the playground, API keys, and
 					agents. Newest first.
diff --git a/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx b/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx
index 0d0211f99..43331651d 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/playground/layout-shell.tsx
@@ -130,7 +130,9 @@ export function PlaygroundLayoutShell({ workspaceId, children }: PlaygroundLayou
 	return (
 		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
 			<div className="md:w-[220px] md:shrink-0">
-				<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">API Playground</h1>
+				<h1 className="mb-4 px-1 text-xl font-semibold tracking-tight text-foreground md:text-2xl">
+					API Playground
+				</h1>
 				<nav className="hidden flex-col gap-0.5 md:flex">
 					{navItems.map((item) => {
 						if (item.type === "section") {
diff --git a/surfsense_web/app/dashboard/[workspace_id]/user-settings/layout-shell.tsx b/surfsense_web/app/dashboard/[workspace_id]/user-settings/layout-shell.tsx
index 5446c4167..0559deaf9 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/user-settings/layout-shell.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/user-settings/layout-shell.tsx
@@ -117,7 +117,9 @@ export function UserSettingsLayoutShell({ workspaceId, children }: UserSettingsL
 	return (
 		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
 			<div className="md:w-[220px] md:shrink-0">
-				<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
+				<h1 className="mb-4 px-1 text-xl font-semibold tracking-tight text-foreground md:text-2xl">
+					{t("title")}
+				</h1>
 				<nav className="hidden flex-col gap-0.5 md:flex">
 					{navItems.map((item) => (
 						<Link
diff --git a/surfsense_web/app/dashboard/[workspace_id]/workspace-settings/layout-shell.tsx b/surfsense_web/app/dashboard/[workspace_id]/workspace-settings/layout-shell.tsx
index e23daecb9..ffef57a03 100644
--- a/surfsense_web/app/dashboard/[workspace_id]/workspace-settings/layout-shell.tsx
+++ b/surfsense_web/app/dashboard/[workspace_id]/workspace-settings/layout-shell.tsx
@@ -76,7 +76,9 @@ export function WorkspaceSettingsLayoutShell({
 	return (
 		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:flex-row">
 			<div className="md:w-[220px] md:shrink-0">
-				<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
+				<h1 className="mb-4 px-1 text-xl font-semibold tracking-tight text-foreground md:text-2xl">
+					{t("title")}
+				</h1>
 				<nav className="hidden flex-col gap-0.5 md:flex">
 					{navItems.map((item) => (
 						<Link