UI improvements

src/App.css

@@ -4,6 +4,7 @@ body {
   z-index: 0;
   color: black;
   overflow-wrap: anywhere;
+  height: 100%;
 }
 
 #root {
@@ -19,6 +20,7 @@ body {
 
 .hint {
   position: absolute;
+  font-size: 80%;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -42,15 +44,18 @@ h2 {
 .dragbox {
   display: flex;
   flex-direction: column;
-  flex-basis: 0;
-  flex-grow: 1;
   min-height: 32px;
-  height: 100%;
+  height: 92%;
 }
 
 .box {
   position: relative;
-  min-width: 30%;
+  &.two {
+    min-width: 48%;
+  }
+  &.three {
+    min-width: 30%;
+  }
   max-width: 10vw;
   padding: 4px;
   margin: 4px min(2px, 4%);
@@ -69,6 +74,7 @@ h2 {
 }
 
 .item {
+  cursor: pointer;
   font-size: small;
   border: 3px dashed black;
   border-radius: 4px;
@@ -81,6 +87,8 @@ button {
   color: ghostwhite;
   background-color: black;
   border: 4px solid black;
+  position: relative;
+  z-index: 1;
 }
 
 ::backdrop {
@@ -93,3 +101,24 @@ button {
   );
   opacity: 0.75;
 }
+
+.tablink {
+  background-color: unset;
+  font-weight: unset;
+  color: black;
+  border: 2px solid black;
+  border-radius: unset;
+  cursor: pointer;
+  padding: 8px 16px;
+  width: 50%;
+}
+
+.tablink:hover {
+  background-color: #777;
+}
+
+/* Style the tab content (and add height:100% for full page content) */
+.tabcontent {
+  display: none;
+  height: 100%;
+}