From da1d9340eccc50b11a845a4be0887069045a8a07 Mon Sep 17 00:00:00 2001
From: Luciano Hanyon Wu <han4wluc@yuusoft.com>
Date: Sun, 12 Oct 2025 22:56:24 +0800
Subject: [PATCH] improve playground layout

---
 playground/pages/index.yaml | 41 +++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/playground/pages/index.yaml b/playground/pages/index.yaml
index 06ea78e..24007f5 100644
--- a/playground/pages/index.yaml
+++ b/playground/pages/index.yaml
@@ -3,24 +3,25 @@ template: base
 title: Jempl Playground
 ---
 - body.dark:
-    - rtgl-view sm-d=v d=h wh=f g=lg p=lg:
-        - rtgl-view flex=1 w=f h=f sm-h=inherit:
-            - rtgl-text flex=1 s="h2":
-                - "Jempl Playground"
-            - rtgl-view d=h w="f" av=c:
-                - rtgl-text mr=md ellipsis: "Load Example"
-                - select#example-select:
-                    - $for example in examples:
-                        - option value="${escapeJson(example.value)}": "${example.name}"
-            - rtgl-view flex= wh=f:
-                - rtgl-view wh="f":
-                    - rtgl-text s=lg: "Template (YAML):"
-                    - textarea#input-template placeholder="Enter YAML template here..." rows="10" cols="50":
-                - rtgl-view wh="f":
-                    - rtgl-text s=lg: "Data (YAML):"
-                    - textarea#input-data placeholder="Enter YAML data here..." rows="10" cols="50":
+    - rtgl-view wh=f p=lg:
+        - rtgl-text flex=1 s="h2":
+            - "Jempl Playground"
+        - rtgl-view d=h w="f" av=c:
+            - rtgl-text mr=md ellipsis: "Load Example"
+            - select#example-select:
+                - $for example in examples:
+                    - option value="${escapeJson(example.value)}": "${example.name}"
+        - rtgl-view sm-d=v d=h wh=f g=lg:
+            - rtgl-view flex=1 w=f h=f sm-h=inherit:
+                - rtgl-view flex= wh=f:
+                    - rtgl-view wh="f":
+                        - rtgl-text s=lg: "Template (YAML):"
+                        - textarea#input-template placeholder="Enter YAML template here..." rows="10" cols="50":
+                    - rtgl-view wh="f":
+                        - rtgl-text s=lg: "Data (YAML):"
+                        - textarea#input-data placeholder="Enter YAML data here..." rows="10" cols="50":
 
-        - rtgl-view flex=1 g=lg w=f h=f sm-h=inherit:
-            - rtgl-text s="h2": "Output: "
-            - textarea#output readonly:
-            - rtgl-view sm-show hide h=120:
+            - rtgl-view flex=1 w=f h=f sm-h=inherit:
+                - rtgl-text s="lg": "Output: "
+                - textarea#output readonly:
+                - rtgl-view sm-show hide h=120: