html: split vars and stacks into 3 columns

2 files changed, 22 insertions, 12 deletions

diff --git a/site/index.html b/site/index.html
index 2273668..665411b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -76,20 +76,22 @@
               <div class='wordlist'></div>
             </fieldset>
 
-            <fieldset>
-              <legend>vars</legend>
-              <dl class='vars'></dl>
-            </fieldset>
+            <div class='state'>
+              <fieldset>
+                <legend>vars</legend>
+                <dl class='vars'></dl>
+              </fieldset>
 
-            <fieldset>
-              <legend>stack</legend>
-              <ol class='stack'></ol>
-            </fieldset>
+              <fieldset>
+                <legend>stack</legend>
+                <ol class='stack'></ol>
+              </fieldset>
 
-            <fieldset>
-              <legend>call stack</legend>
-              <ol class='callstack'></ol>
-            </fieldset>
+              <fieldset>
+                <legend>call stack</legend>
+                <ol class='callstack'></ol>
+              </fieldset>
+            </div> <!-- state -->
           </details> <!-- scope -->
         </x-inspector>
       </section>
diff --git a/site/main.css b/site/main.css
index bf3eff8..d31bec3 100644
--- a/site/main.css
+++ b/site/main.css
@@ -66,3 +66,11 @@ x-inspector x-op {
     padding: 5px;
     border: 1px solid grey;
 }
+
+x-inspector .state {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+x-inspector .state fieldset {
+}