From 21cb011980fe22f21374637d7ed30148737c26e7 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sun, 23 Feb 2025 20:42:57 +0800
Subject: [PATCH] fix(playground): add bg-muted class to ScrollArea for better
 visibility

---
 src/app/(app)/playground/@description/layout.tsx | 2 +-
 src/app/(app)/playground/@workspace/layout.tsx   | 2 +-
 src/app/(app)/playground/layout.tsx              | 2 +-
 src/components/banner.tsx                        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(app)/playground/@description/layout.tsx b/src/app/(app)/playground/@description/layout.tsx
index 9e9ec02..beabf91 100644
--- a/src/app/(app)/playground/@description/layout.tsx
+++ b/src/app/(app)/playground/@description/layout.tsx
@@ -9,7 +9,7 @@ interface DescriptionLayoutProps {
 export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
   return (
     <Tabs defaultValue="description">
-      <ScrollArea className="h-11 flex items-center pt-1 px-1">
+      <ScrollArea className="h-11 flex items-center pt-1 px-1 bg-muted">
         <TabsList className="gap-1 bg-transparent">
           <TabsTrigger
             value="description"
diff --git a/src/app/(app)/playground/@workspace/layout.tsx b/src/app/(app)/playground/@workspace/layout.tsx
index 7c2e477..761b844 100644
--- a/src/app/(app)/playground/@workspace/layout.tsx
+++ b/src/app/(app)/playground/@workspace/layout.tsx
@@ -9,7 +9,7 @@ interface WorkspaceLayoutProps {
 export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
   return (
     <Tabs defaultValue="code">
-      <ScrollArea className="h-11 flex items-center pt-1 px-1">
+      <ScrollArea className="h-11 flex items-center pt-1 px-1 bg-muted">
         <TabsList className="gap-1 bg-transparent">
           <TabsTrigger
             value="code"
diff --git a/src/app/(app)/playground/layout.tsx b/src/app/(app)/playground/layout.tsx
index 88f9d74..7b93d5c 100644
--- a/src/app/(app)/playground/layout.tsx
+++ b/src/app/(app)/playground/layout.tsx
@@ -14,7 +14,7 @@ export default function PlaygroundLayout({
   workspace,
 }: PlaygroundLayoutProps) {
   return (
-    <ResizablePanelGroup direction="horizontal" className="p-2.5">
+    <ResizablePanelGroup direction="horizontal" className="p-2.5 pt-0">
       <ResizablePanel defaultSize={50} className="border border-muted rounded-2xl">
         {description}
       </ResizablePanel>
diff --git a/src/components/banner.tsx b/src/components/banner.tsx
index 7a3dc42..6d04b71 100644
--- a/src/components/banner.tsx
+++ b/src/components/banner.tsx
@@ -17,7 +17,7 @@ export function Banner({
   return (
     <header
       {...props}
-      className={cn("h-12 flex items-center justify-center bg-muted text-foreground", className)}
+      className={cn("h-12 flex items-center justify-center text-foreground", className)}
     >
       <p className="flex justify-center text-sm">
         <a href={link} className="group">