From f7677d3f2fad43c2473b5051408e686532dce0a5 Mon Sep 17 00:00:00 2001
From: Evan Hahn <me@evanhahn.com>
Date: Thu, 9 Nov 2023 09:10:20 -0600
Subject: [PATCH] Fix overflow in explorer

---
 public/common/global.css | 147 ++++++++++++++++++++-------------------
 1 file changed, 76 insertions(+), 71 deletions(-)

diff --git a/public/common/global.css b/public/common/global.css
index 9c22313..aaa43fe 100644
--- a/public/common/global.css
+++ b/public/common/global.css
@@ -1,161 +1,166 @@
 @import url("vendor/reset.css");
 
 :root {
-    --foreground-color: #111;
-    --background-color: #fff;
-    --activated-color: #333;
-    --tree-border-color: #ccc;
-    --tree-activated-border-color: #000;
-    --button-color: #fff;
-    --button-background-color: #495;
-    --button-background-color-hover: limegreen;
+  --foreground-color: #111;
+  --background-color: #fff;
+  --activated-color: #333;
+  --tree-border-color: #ccc;
+  --tree-activated-border-color: #000;
+  --button-color: #fff;
+  --button-background-color: #495;
+  --button-background-color-hover: limegreen;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --foreground-color: #f0f0f0;
-        --background-color: #222;
-        --activated-color: #ddd;
-        --tree-border-color: #444;
-        --tree-activated-border-color: #fff;
-    }
+  :root {
+    --foreground-color: #f0f0f0;
+    --background-color: #222;
+    --activated-color: #ddd;
+    --tree-border-color: #444;
+    --tree-activated-border-color: #fff;
+  }
 }
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    font-size: 18pt;
-    line-height: 1.5em;
-    color: var(--foreground-color);
-    background: var(--background-color);
-    margin: 1em;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 18pt;
+  line-height: 1.5em;
+  color: var(--foreground-color);
+  background: var(--background-color);
+  margin: 1em;
+  display: flex;
+  max-height: 100vh;
+  overflow: hidden;
 }
 
 h1,
 p {
-    margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 h1 {
-    font-weight: bold;
-    font-size: 200%;
+  font-weight: bold;
+  font-size: 200%;
 }
 
 a {
-    color: inherit;
+  color: inherit;
 }
 
 ul,
 ol {
-    padding-left: 1rem;
+  padding-left: 1rem;
 }
 
 ul {
-    list-style-type: disc;
+  list-style-type: disc;
 }
 
 ol {
-    list-style-type: decimal;
+  list-style-type: decimal;
 }
 
 input,
 textarea {
-    font: inherit;
+  font: inherit;
 }
 
 #explorer {
-    display: flex;
-    overflow: hidden;
+  flex: 1;
+  display: flex;
+  overflow: hidden;
 }
 
 #explorer .bytes,
 #explorer .tree {
-    flex: 1;
-    overflow: auto;
+  flex: 1;
+  overflow: auto;
 }
 
 #explorer .bytes {
-    max-width: 15em;
-    font-family: Inconsolata, Consolas, Monaco, monospace;
-    font-size: 80%;
-    line-height: 1.5em;
-    white-space: pre-wrap;
+  max-width: 15em;
+  font-family: Inconsolata, Consolas, Monaco, monospace;
+  font-size: 80%;
+  line-height: 1.5em;
+  white-space: pre-wrap;
 }
 
 #explorer .bytes span {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 #explorer .bytes span.activated {
-    background: var(--activated-color);
-    color: var(--background-color);
+  background: var(--activated-color);
+  color: var(--background-color);
 }
 
 #explorer .tree {
-    padding-left: 0.5rem;
-    scrollbar-gutter: stable;
+  padding-left: 0.5rem;
+  scrollbar-gutter: stable;
 }
 
 #explorer .tree details.activated {
-    outline-width: 3px;
-    outline-color: var(--tree-activated-border-color);
+  outline-width: 3px;
+  outline-color: var(--tree-activated-border-color);
 }
 
 #explorer .tree details {
-    outline: 1px solid var(--tree-border-color);
-    border-radius: 10px;
-    padding: 0 0.5rem 0 0.5rem;
-    transition: outline ease-out 0.1s;
-    margin: 3px 3px 0.5rem 3px;
+  outline: 1px solid var(--tree-border-color);
+  border-radius: 10px;
+  padding: 0 0.5rem 0 0.5rem;
+  transition: outline ease-out 0.1s;
+  margin: 3px 3px 0.5rem 3px;
 }
 
 #explorer .tree details[open] {
-    padding-bottom: 6px;
+  padding-bottom: 6px;
 }
 
 #explorer .tree details p:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 #explorer .tree details .children {
-    margin-left: 0.5rem;
+  margin-left: 0.5rem;
 }
 
 #explorer .tree details summary {
-    cursor: pointer;
-    user-select: none;
-    display: flex;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
 }
 
 #explorer .tree details summary:before {
-    content: "▶";
-    margin-right: 0.2em;
-    transition: transform ease-out 0.1s;
+  content: "▶";
+  margin-right: 0.2em;
+  transition: transform ease-out 0.1s;
 }
 
-#explorer .tree details[open]>summary:before {
-    transform: rotate(90deg);
+#explorer .tree details[open] > summary:before {
+  transform: rotate(90deg);
 }
 
 #explorer .tree details summary:focus {
-    outline: none;
+  outline: none;
 }
 
 #explorer .tree details summary .title {
-    flex: 1;
-    font-weight: bold;
+  flex: 1;
+  font-weight: bold;
 }
 
 #explorer .tree details summary .bytecount {
-    margin-left: 0.5em;
-    font-size: 75%;
-    opacity: 0.5;
+  margin-left: 0.5em;
+  font-size: 75%;
+  opacity: 0.5;
 }
 
 #explorer .tree details:not(.activated) {
-    background: var(--background-color);
-    color: var(--foreground-color);
-}
\ No newline at end of file
+  background: var(--background-color);
+  color: var(--foreground-color);
+}