Draw boxes, set font size

architype.css

@@ -31,6 +31,7 @@ body {
   background: var(--background);
   color: var(--text);
   font-family: 'Courier', monospace;
+  font-size: 16px;
 
   display: grid;
   grid-template:
@@ -114,16 +115,24 @@ body {
 }
 
 .grid {
-  width: 100%;
-  height: 100%;
+  width: calc(100% - 20px);
+  height: calc(100% - 20px);
   display: grid;
-  align-content: center;
+  align-items: center;
+  justify-items: center;
+  margin: 10px;
 }
 
 .gridNode {
-  width: 100%;
-  height: 100%;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
   display: flex;
   align-items: center;
   justify-content: center;
+
+  border-radius: 10px;
+  padding: 3px;
+  border: 1px solid white;
+
+  overflow: hidden;
 }

architype.js

@@ -18,6 +18,7 @@ class Architype {
     this.container_.classList.add('dark');
 
     this.container_.addEventListener('keydown', (e) => { this.onKeyDown(e); });
+    this.container_.addEventListener('resize', (e) => { this.onResize(e); });
 
     let editorElem = document.createElement('ul');
     this.container_.appendChild(editorElem);
@@ -71,6 +72,7 @@ class Architype {
     this.graph_ = this.buildGraph();
     this.buildGrid(this.graph_);
     this.updateTargets(this.graph_);
+    this.fixSizes(this.graph_.nodes);
   }
 
   onKeyDown(e) {
@@ -81,6 +83,10 @@ class Architype {
     }
   }
 
+  onResize(e) {
+    this.fixSizes(this.graph_.nodes);
+  }
+
   exportGraphviz() {
     let lines = [
         'digraph G {',
@@ -513,6 +519,19 @@ class Architype {
       node.gridElem.style.gridRow = node.pos[1] + 1;
     }
   }
+
+  fixSizes(nodes) {
+    for (let node of nodes) {
+      let elem = node.gridElem;
+      let size = 16;
+      for (let size = 16;
+           size && (elem.scrollWidth > elem.clientWidth ||
+                    elem.scrollHeight > elem.clientHeight);
+           --size) {
+        elem.style.fontSize = size + 'px';
+      }
+    }
+  }
 }
 
 class ListenUtils {