feat(playground): make named-layouts visually easier to identify (#296)

Added horizontal CSS bars to make it easier for humans to see changes
the named-layouts playground.

<img width="1454" height="354" alt="image"
src="https://github.com/user-attachments/assets/d1100822-b5dd-4bca-a9ed-004573163027"
/>

Co-authored-by: mdong <mdong@cloudflare.com>

Author: mdong1909

playground/named-layouts/pages/_layouts/landing.tsx

@@ -1,3 +1,20 @@
 export default function LandingLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="landing">{children}</div>;
+  return (
+    <div data-layout="landing" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#305CDE',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        Landing
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }

playground/named-layouts/pages/docs/_layouts/api.tsx

@@ -1,3 +1,20 @@
 export default function ApiLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="api">{children}</div>;
+  return (
+    <div data-layout="api" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#006400',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        API
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }

playground/named-layouts/pages/docs/layout.tsx

@@ -1,3 +1,20 @@
 export default function DocsLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="docs">{children}</div>;
+  return (
+    <div data-layout="docs" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#FFCE1B',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        Docs
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }

playground/named-layouts/pages/layout.tsx

@@ -1,3 +1,20 @@
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return <div data-layout="root">{children}</div>;
+  return (
+    <div data-layout="root" style={{ minHeight: '100vh', margin: -8 }}>
+      <header
+        style={{
+          boxSizing: 'border-box',
+          width: '100%',
+          padding: '16px 24px',
+          background: '#dc2626',
+          color: '#ffffff',
+          fontWeight: 700,
+          textAlign: 'center',
+        }}
+      >
+        Layout
+      </header>
+      <main style={{ padding: 16 }}>{children}</main>
+    </div>
+  );
 }