responsiveness for preview container

app/gluons/playground/page.tsx

@@ -4,6 +4,7 @@ import { LayoutDashboard } from "lucide-react";
 import { Sidebar, SidebarItem, SidebarLink, SidebarList } from "@/components/gluons/sidebar";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
+import Image from "next/image";
 
 const PlaygroundPage = () => {
     return (
@@ -15,23 +16,27 @@ const PlaygroundPage = () => {
                 className="!my-0"
                 lineNumbers={true}
             >
-                <div className="relative w-full h-full flex flex-col bg-background">
-                    <div className="h-full w-full">
-                        <div className="absolute top-0 left-0 h-full p-6 flex flex-col gap-2 w-16 @4xl:w-48 bg-background border-r">
-                            <Button variant="ghost" className="flex items-center gap-x-2">
+                <div className="w-full h-full flex flex-col bg-background">
+                    <div className="absolute h-14 w-full flex items-center justify-between gap-4 px-8 bg-background border-b">
+                        <Image src="/logoipsum.svg" width={100} height={30} alt="Logo" className="brightness-150"/>
+                        <div className="h-6 w-32 bg-muted rounded-md" />
+                    </div>
+                    <div className="relative mt-14 h-full w-full overflow-hidden">
+                        <div className="absolute top-0 left-0 h-full p-8 @lg:flex flex-col gap-4 hidden @4xl:w-48 bg-background border-r">
+                            <div className="flex gap-2 items-center justify-start">
                                 <LayoutDashboard className="h-4 w-4"/>
                                 Dashboard
-                            </Button>
-                            <Button variant="ghost" className="flex items-center gap-x-2">
+                            </div>
+                            <div className="flex gap-2 items-center justify-start">
                                 <LayoutDashboard className="h-4 w-4"/>
                                 Dashboard
-                            </Button>
-                            <Button variant="ghost" className="flex items-center gap-x-2">
+                            </div>
+                            <div className="flex gap-2 items-center justify-start">
                                 <LayoutDashboard className="h-4 w-4"/>
                                 Dashboard
-                            </Button>
+                            </div>
                         </div>
-                        <div className="h-full w-auto p-8 ml-16 @lg:ml-48 space-y-4 overflow-scroll">
+                        <div className="h-full w-auto p-8 @lg:ml-48 space-y-4 overflow-scroll">
                             <div className="h-12 flex-1 bg-muted rounded-md"/>
                             <div className="h-96 flex-1 bg-muted rounded-md"/>
                             <div className="flex flex-row flex-wrap gap-4">

components/demo-preview.tsx

@@ -57,14 +57,13 @@ export const DemoPreview = ({
             </CardHeader>
             <CardContent 
                 className={cn(
-                    "p-0 flex justify-center items-center bg-dot-grid bg-center h-[500px] overflow-hidden",
-                    devicePreview !== "desktop" && "p-8",
+                    "py-8 flex justify-center items-center bg-dot-grid bg-center h-[500px] overflow-hidden",
+                    devicePreview === "desktop" && "px-8",
                 )}
             >
                 <div className={cn(
-                    "@container h-full bg-background",
-                    devicePreview === "desktop" && "relative w-full",
-                    devicePreview !== "desktop" && "grow border rounded-md bg-background",
+                    "@container grow h-full border rounded-md bg-background",
+                    devicePreview === "desktop" && "w-full",
                     devicePreview === "tablet" && "max-w-lg",
                     devicePreview === "smartphone" && "max-w-sm",
                 )}>