From b9a4ff211878671bb7c3f7eca4f3c5cd443bdbb7 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 15 Jan 2026 12:21:43 +0100
Subject: [PATCH] fix: improve playground templates layout and typography
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add font-family: system-ui, sans-serif to all template bodies
- Wrap pricing cards in .pricing flex container
- Wrap animation boxes in .animation-demo flex container
- Wrap flexbox layout in .layout container
- Simplify navigation (fewer links to fit preview)
- Reduce sizes to better fit preview area

🤖 Generated with [Claude Code](https://claude.com/claude-code)
---
 src/config/playground-templates.js | 233 ++++++++++++++++-------------
 1 file changed, 126 insertions(+), 107 deletions(-)

diff --git a/src/config/playground-templates.js b/src/config/playground-templates.js
index 2c68451..1e107a1 100644
--- a/src/config/playground-templates.js
+++ b/src/config/playground-templates.js
@@ -7,6 +7,12 @@ export const playgroundTemplates = [
 	{
 		name: "Card Component",
 		code: `<style>
+  body {
+    font-family: system-ui, sans-serif;
+    padding: 1.5rem;
+    background: #f0f2f5;
+  }
+
   .card {
     max-width: 320px;
     background: white;
@@ -42,30 +48,36 @@ export const playgroundTemplates = [
   <div class="card-image"></div>
   <div class="card-content">
     <h2 class="card-title">Card Title</h2>
-    <p class="card-text">This is a simple card component with an image placeholder and text content.</p>
+    <p class="card-text">A simple card component with an image placeholder and text content.</p>
   </div>
 </article>`
 	},
 	{
 		name: "Navigation Bar",
 		code: `<style>
+  body {
+    font-family: system-ui, sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+
   .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 2rem;
+    padding: 1rem 1.5rem;
     background: #1a1a2e;
   }
 
   .logo {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: bold;
     color: white;
   }
 
   .nav-links {
     display: flex;
-    gap: 2rem;
+    gap: 1.5rem;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -74,7 +86,6 @@ export const playgroundTemplates = [
   .nav-links a {
     color: #ccc;
     text-decoration: none;
-    transition: color 0.2s;
   }
 
   .nav-links a:hover {
@@ -87,6 +98,7 @@ export const playgroundTemplates = [
     color: white;
     border: none;
     border-radius: 6px;
+    font-size: 0.9rem;
     cursor: pointer;
   }
 </style>
@@ -96,7 +108,6 @@ export const playgroundTemplates = [
   <ul class="nav-links">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
-    <li><a href="#">Services</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
   <button class="nav-btn">Sign Up</button>
@@ -106,6 +117,7 @@ export const playgroundTemplates = [
 		name: "Profile Card",
 		code: `<style>
   body {
+    font-family: system-ui, sans-serif;
     display: flex;
     justify-content: center;
     padding: 2rem;
@@ -121,8 +133,8 @@ export const playgroundTemplates = [
   }
 
   .avatar {
-    width: 100px;
-    height: 100px;
+    width: 80px;
+    height: 80px;
     border-radius: 50%;
     background: linear-gradient(135deg, #f093fb, #f5576c);
     margin: 0 auto 1rem;
@@ -142,7 +154,7 @@ export const playgroundTemplates = [
 
   .stats {
     display: flex;
-    gap: 2rem;
+    gap: 1.5rem;
     justify-content: center;
     padding-top: 1rem;
     border-top: 1px solid #eee;
@@ -154,7 +166,7 @@ export const playgroundTemplates = [
   }
 
   .stat-label {
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     color: #999;
   }
 </style>
@@ -183,11 +195,11 @@ export const playgroundTemplates = [
 		name: "Button Styles",
 		code: `<style>
   body {
+    font-family: system-ui, sans-serif;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     padding: 2rem;
-    font-family: system-ui, sans-serif;
   }
 
   .btn {
@@ -248,19 +260,24 @@ export const playgroundTemplates = [
 		name: "Pricing Table",
 		code: `<style>
   body {
-    display: flex;
-    gap: 1.5rem;
+    font-family: system-ui, sans-serif;
     padding: 2rem;
     background: #f8f9fa;
+  }
+
+  .pricing {
+    display: flex;
+    gap: 1rem;
     justify-content: center;
+    align-items: flex-start;
   }
 
   .plan {
     background: white;
     border-radius: 12px;
-    padding: 2rem;
+    padding: 1.5rem;
     text-align: center;
-    width: 200px;
+    width: 140px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
@@ -271,30 +288,31 @@ export const playgroundTemplates = [
   }
 
   .plan-name {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     opacity: 0.8;
   }
 
   .plan-price {
-    font-size: 2.5rem;
+    font-size: 2rem;
     font-weight: bold;
     margin: 0.5rem 0;
   }
 
   .plan-period {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     opacity: 0.7;
   }
 
   .plan-btn {
-    margin-top: 1.5rem;
-    padding: 0.75rem 1.5rem;
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 500;
+    font-size: 0.85rem;
   }
 
   .plan .plan-btn {
@@ -308,31 +326,32 @@ export const playgroundTemplates = [
   }
 </style>
 
-<div class="plan">
-  <div class="plan-name">Basic</div>
-  <div class="plan-price">$9</div>
-  <div class="plan-period">per month</div>
-  <button class="plan-btn">Get Started</button>
-</div>
-
-<div class="plan featured">
-  <div class="plan-name">Pro</div>
-  <div class="plan-price">$29</div>
-  <div class="plan-period">per month</div>
-  <button class="plan-btn">Get Started</button>
-</div>
-
-<div class="plan">
-  <div class="plan-name">Team</div>
-  <div class="plan-price">$99</div>
-  <div class="plan-period">per month</div>
-  <button class="plan-btn">Get Started</button>
+<div class="pricing">
+  <div class="plan">
+    <div class="plan-name">Basic</div>
+    <div class="plan-price">$9</div>
+    <div class="plan-period">per month</div>
+    <button class="plan-btn">Get Started</button>
+  </div>
+  <div class="plan featured">
+    <div class="plan-name">Pro</div>
+    <div class="plan-price">$29</div>
+    <div class="plan-period">per month</div>
+    <button class="plan-btn">Get Started</button>
+  </div>
+  <div class="plan">
+    <div class="plan-name">Team</div>
+    <div class="plan-price">$99</div>
+    <div class="plan-period">per month</div>
+    <button class="plan-btn">Get Started</button>
+  </div>
 </div>`
 	},
 	{
 		name: "Form Layout",
 		code: `<style>
   body {
+    font-family: system-ui, sans-serif;
     display: flex;
     justify-content: center;
     padding: 2rem;
@@ -343,7 +362,7 @@ export const playgroundTemplates = [
     background: white;
     padding: 2rem;
     border-radius: 12px;
-    width: 320px;
+    width: 280px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 
@@ -409,41 +428,41 @@ export const playgroundTemplates = [
 		name: "Feature Grid",
 		code: `<style>
   body {
-    padding: 2rem;
     font-family: system-ui, sans-serif;
+    padding: 1.5rem;
+    background: #f8f9fa;
   }
 
   .features {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
-    max-width: 800px;
+    gap: 1rem;
   }
 
   .feature {
-    padding: 1.5rem;
+    padding: 1.25rem;
     background: white;
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
   .feature-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
     background: linear-gradient(135deg, #667eea, #764ba2);
-    margin-bottom: 1rem;
+    margin-bottom: 0.75rem;
   }
 
   .feature-title {
     margin: 0 0 0.5rem;
-    font-size: 1.1rem;
+    font-size: 1rem;
   }
 
   .feature-text {
     margin: 0;
     color: #666;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     line-height: 1.5;
   }
 </style>
@@ -452,17 +471,17 @@ export const playgroundTemplates = [
   <div class="feature">
     <div class="feature-icon"></div>
     <h3 class="feature-title">Fast</h3>
-    <p class="feature-text">Lightning quick performance for all your needs.</p>
+    <p class="feature-text">Lightning quick performance.</p>
   </div>
   <div class="feature">
     <div class="feature-icon"></div>
     <h3 class="feature-title">Secure</h3>
-    <p class="feature-text">Enterprise-grade security built in from day one.</p>
+    <p class="feature-text">Enterprise-grade security.</p>
   </div>
   <div class="feature">
     <div class="feature-icon"></div>
     <h3 class="feature-title">Simple</h3>
-    <p class="feature-text">Intuitive interface that anyone can master.</p>
+    <p class="feature-text">Intuitive interface.</p>
   </div>
 </div>`
 	},
@@ -470,11 +489,11 @@ export const playgroundTemplates = [
 		name: "Badge Collection",
 		code: `<style>
   body {
+    font-family: system-ui, sans-serif;
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     padding: 2rem;
-    font-family: system-ui, sans-serif;
   }
 
   .badge {
@@ -540,18 +559,22 @@ export const playgroundTemplates = [
 		name: "CSS Animation",
 		code: `<style>
   body {
+    font-family: system-ui, sans-serif;
+    padding: 2rem;
+  }
+
+  .animation-demo {
     display: flex;
     gap: 2rem;
-    padding: 3rem;
     justify-content: center;
     align-items: center;
-    min-height: 200px;
+    min-height: 120px;
   }
 
   .box {
-    width: 60px;
-    height: 60px;
-    border-radius: 12px;
+    width: 50px;
+    height: 50px;
+    border-radius: 10px;
   }
 
   .pulse {
@@ -561,12 +584,12 @@ export const playgroundTemplates = [
 
   @keyframes pulse {
     0%, 100% { transform: scale(1); opacity: 1; }
-    50% { transform: scale(1.1); opacity: 0.7; }
+    50% { transform: scale(1.15); opacity: 0.7; }
   }
 
   .spin {
     background: #f093fb;
-    animation: spin 3s linear infinite;
+    animation: spin 2s linear infinite;
   }
 
   @keyframes spin {
@@ -576,52 +599,49 @@ export const playgroundTemplates = [
 
   .bounce {
     background: #10b981;
-    animation: bounce 1s ease infinite;
+    animation: bounce 0.8s ease infinite;
   }
 
   @keyframes bounce {
     0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-20px); }
+    50% { transform: translateY(-15px); }
   }
 
   .shake {
     background: #f5576c;
-    animation: shake 0.5s ease infinite;
+    animation: shake 0.4s ease infinite;
   }
 
   @keyframes shake {
     0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-5px); }
-    75% { transform: translateX(5px); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
   }
 </style>
 
-<div class="box pulse"></div>
-<div class="box spin"></div>
-<div class="box bounce"></div>
-<div class="box shake"></div>`
+<div class="animation-demo">
+  <div class="box pulse"></div>
+  <div class="box spin"></div>
+  <div class="box bounce"></div>
+  <div class="box shake"></div>
+</div>`
 	},
 	{
 		name: "Flexbox Layout",
 		code: `<style>
   body {
-    padding: 1rem;
     font-family: system-ui, sans-serif;
+    padding: 1rem;
+    margin: 0;
   }
 
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .row {
+  .layout {
     display: flex;
     gap: 1rem;
   }
 
   .sidebar {
-    width: 200px;
+    width: 120px;
     flex-shrink: 0;
     background: #1a1a2e;
     color: white;
@@ -636,9 +656,10 @@ export const playgroundTemplates = [
     border-radius: 8px;
   }
 
-  .card-row {
+  .cards {
     display: flex;
-    gap: 1rem;
+    gap: 0.75rem;
+    margin-top: 1rem;
   }
 
   .card {
@@ -650,35 +671,33 @@ export const playgroundTemplates = [
     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
   }
 
-  h3 { margin: 0 0 0.5rem; }
-  p { margin: 0; color: #666; font-size: 0.9rem; }
+  h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
+  p { margin: 0; color: #666; font-size: 0.8rem; }
 </style>
 
-<div class="container">
-  <div class="row">
-    <aside class="sidebar">
-      <h3>Sidebar</h3>
-      <p>Fixed width</p>
-    </aside>
-    <main class="main">
-      <h3>Main Content</h3>
-      <p>Flexible width - grows to fill space</p>
-      <div class="card-row" style="margin-top: 1rem;">
-        <div class="card">
-          <h3>Card 1</h3>
-          <p>Equal flex</p>
-        </div>
-        <div class="card">
-          <h3>Card 2</h3>
-          <p>Equal flex</p>
-        </div>
-        <div class="card">
-          <h3>Card 3</h3>
-          <p>Equal flex</p>
-        </div>
+<div class="layout">
+  <aside class="sidebar">
+    <h3>Sidebar</h3>
+    <p>Fixed width</p>
+  </aside>
+  <main class="main">
+    <h3>Main Content</h3>
+    <p>Flexible width</p>
+    <div class="cards">
+      <div class="card">
+        <h3>Card 1</h3>
+        <p>Equal</p>
       </div>
-    </main>
-  </div>
+      <div class="card">
+        <h3>Card 2</h3>
+        <p>Equal</p>
+      </div>
+      <div class="card">
+        <h3>Card 3</h3>
+        <p>Equal</p>
+      </div>
+    </div>
+  </main>
 </div>`
 	}
 ];