From ef02ebe4c84a51c3df98c327d59583923ce27e8e Mon Sep 17 00:00:00 2001
From: Johann Schopplich <mail@johannschopplich.com>
Date: Sun, 30 Nov 2025 15:26:15 +0100
Subject: [PATCH] docs(playground): update layout

---
 .../theme/components/PlaygroundLayout.vue     | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/docs/.vitepress/theme/components/PlaygroundLayout.vue b/docs/.vitepress/theme/components/PlaygroundLayout.vue
index 3e02fd6..73cad55 100644
--- a/docs/.vitepress/theme/components/PlaygroundLayout.vue
+++ b/docs/.vitepress/theme/components/PlaygroundLayout.vue
@@ -305,20 +305,18 @@ async function loadTokenizer() {
 
 <style scoped>
 .playground {
-  padding: 32px 24px 96px;
-  min-height: 100vh;
-  background: var(--vp-c-bg);
+  padding: 32px 24px 32px;
 }
 
 @media (min-width: 768px) {
   .playground {
-    padding: 48px 32px 128px;
+    padding: 48px 32px 48px;
   }
 }
 
 @media (min-width: 960px) {
   .playground {
-    padding: 48px 32px 0;
+    padding: 48px 32px 48px;
   }
 }
 
@@ -415,7 +413,6 @@ async function loadTokenizer() {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
-  min-height: 500px;
 }
 
 @media (max-width: 768px) {
@@ -427,6 +424,7 @@ async function loadTokenizer() {
 .editor-pane {
   display: flex;
   flex-direction: column;
+  min-height: 500px;
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   overflow: hidden;
@@ -434,6 +432,12 @@ async function loadTokenizer() {
   transition: border-color 0.25s;
 }
 
+@media (max-width: 768px) {
+  .editor-pane {
+    min-height: 400px;
+  }
+}
+
 .editor-pane:focus-within {
   border-color: var(--vp-c-brand-1);
 }
@@ -583,8 +587,7 @@ async function loadTokenizer() {
 
 .editor-output pre {
   margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
+  white-space: pre;
 }
 
 .error-message {