fix(playground): add bg-muted class to ScrollArea for better visibility

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"

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"

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>

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">