From 39474a8e7c84cb39fc450fdc4f16710b05267ddf Mon Sep 17 00:00:00 2001
From: David Enke <david@enke.dev>
Date: Mon, 21 Oct 2024 16:22:51 +0200
Subject: [PATCH] fix(demo): layout

---
 src/demo/demo.css | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/demo/demo.css b/src/demo/demo.css
index 620b28e..18463d0 100644
--- a/src/demo/demo.css
+++ b/src/demo/demo.css
@@ -24,22 +24,25 @@ header {
   display: grid;
   grid-template:
     'title nav'
-    'description .' / 1fr;
-  gap: 10px;
+    'desc desc' / 1fr;
+  gap: 5px 10px;
 
   h1 {
     grid-area: title;
+    align-self: end;
   }
 
   p {
-    grid-area: description;
+    grid-area: desc;
   }
 
   nav {
     grid-area: nav;
     display: flex;
-    flex-flow: row nowrap;
-    gap: 10px;
+    flex-flow: row wrap;
+    gap: 0 10px;
+    align-items: center;
+    justify-content: center;
 
     img {
       height: 2em;
@@ -118,7 +121,6 @@ legend {
 }
 
 #input > div,
-pre > div,
 code,
 textarea,
 pre {
@@ -150,11 +152,20 @@ pre {
     flex-direction: row;
   }
 
-  code {
+  > div {
     flex: 1 1 0;
+    height: 0;
+    width: 100%;
+
+    @media (orientation: portrait) {
+      height: 100%;
+      width: 0;
+    }
+  }
+
+  code {
     display: block;
     box-sizing: border-box;
-    max-height: 100%;
     padding: 10px;
     overflow: auto;
   }
@@ -230,7 +241,8 @@ pre {
     z-index: 2;
 
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: row wrap;
+    justify-content: end;
     gap: 10px;
   }
 }