From 4d0a77f743f5a861ce35b66c53f7fa5eddfffc69 Mon Sep 17 00:00:00 2001
From: devswha <devswha@gmail.com>
Date: Fri, 7 Aug 2026 23:12:00 +0900
Subject: [PATCH] fix(playground): one-row header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Docs/Benchmark/Ethics leave the top nav (all four stay in the footer), nav
padding and link gaps tighten, and the control-cluster wrap breakpoint drops
to 1020px — at desktop widths the brand, three links, and five controls sit
on a single line.
---
 playground/chatgpt.css | 6 +++---
 playground/index.html  | 3 ---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/playground/chatgpt.css b/playground/chatgpt.css
index 1b0711a..6cc5bba 100644
--- a/playground/chatgpt.css
+++ b/playground/chatgpt.css
@@ -67,12 +67,12 @@ a { color: inherit; }
 .nav {
   position: sticky; top: 0; z-index: 20;
   display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
-  padding: 14px clamp(28px, 8vw, 120px);
+  padding: 14px clamp(20px, 4vw, 56px);
   background: transparent;
 }
 .nav__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.4px; text-decoration: none; }
 .nav__icon { display: block; width: 26px; height: 26px; }
-.nav__links { display: flex; align-items: center; gap: 20px; margin-left: 14px; }
+.nav__links { display: flex; align-items: center; gap: 16px; margin-left: 14px; }
 .nav__links a { font-size: 15px; color: var(--text-dim); text-decoration: none; }
 .nav__links a:hover { color: var(--text); }
 .nav__end { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
@@ -459,7 +459,7 @@ details.foldout > summary:focus-visible,
 
 /* Mid widths: drop the whole control cluster onto its own row instead of
    letting a single trailing select orphan-wrap next to the nav links. */
-@media (max-width: 1180px) {
+@media (max-width: 1020px) {
   .nav__end { flex-basis: 100%; justify-content: flex-start; }
 }
 @media (max-width: 900px) {
diff --git a/playground/index.html b/playground/index.html
index f12470a..3099122 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -20,11 +20,8 @@
       </a>
       <nav class="nav__links" aria-label="Main">
         <a href="https://github.com/devswha/patina">GitHub</a>
-        <a href="https://github.com/devswha/patina/tree/main/docs">Docs</a>
         <a href="#examples">Examples</a>
         <a href="#pricing">Pricing</a>
-        <a href="https://github.com/devswha/patina/blob/main/docs/benchmarks/latest.md">Benchmark</a>
-        <a href="https://github.com/devswha/patina/blob/main/docs/ETHICS.md">Ethics</a>
       </nav>
       <div class="nav__end">
         <label class="ctl">