web: Expose debug info, fix view on mobile.

web/src/App.scss

@@ -2,9 +2,14 @@
 
 html { font-size: 16px; }
 
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 #app {
   font-family: "Segoe UI", Helvetica, Arial, sans-serif;
-  box-sizing: border-box;
 
   button, input, select, textarea {
     font-size: inherit;
@@ -14,6 +19,7 @@ html { font-size: 16px; }
 
   button {
     color: #1084AC;
+    cursor: pointer;
     background-color: #1084AC0A;
     border: solid thin #1084AC;
     border-radius: 0.25em;
@@ -37,6 +43,26 @@ html { font-size: 16px; }
     }
 
     &:disabled { opacity: 0.75; }
+
+  }
+
+  button.low-profile {
+    color: black;
+    background-color: unset;
+    border: none;
+    box-shadow: none;
+    font-weight: normal;
+    transition-property: color, font-weight;
+    transition-duration: 250ms;
+
+    &:not(:disabled) {
+      &:hover, &:focus {
+        color: #1084AC;
+        font-weight: bold;
+        background-color: unset;
+        box-shadow: none;
+      }
+    }
   }
 }
 
@@ -66,8 +92,20 @@ html { font-size: 16px; }
 
 @include forSize(mobile) {
   body { margin: 0; }
+
+  #app #debug-information .mobile { display: inline-block; }
+}
+
+@include forSize(tablet) {
+  #app #debug-information .tablet { display: inline-block; }
+}
+
+@include forSize(desktop) {
+  #app #debug-information .desktop { display: inline-block; }
 }
 
 @include forSize(ultrawide) {
   html { font-size: 24px; }
+
+  #app #debug-information .ultrawide { display: inline-block; }
 }