instance mobile stuff and no sword slay

client/assets/styles/controls.less

@@ -44,7 +44,10 @@ aside {
     button {
         width: 100%;
         font-size: 150%;
-        margin-bottom: 0.5em;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     button.ready:enabled {

client/assets/styles/instance.mobile.less

@@ -1,5 +1,20 @@
 @import 'colours.less';
 
+// tablet / ipad
+@media (max-width: 1100px) {
+    .instance {
+        grid-template-columns: 1fr2;
+        grid-template-rows: min-content 1fr;
+        grid-template-areas:
+            "vbox"
+            "constructs";
+
+        .info {
+            display: none;
+        }
+    }
+}
+
 @media (max-width: 800px) {
     .instance {
         font-size: 8pt;
@@ -32,6 +47,10 @@
         &:not(.visible) {
             display: none;
         }
+
+        .vbox-vbox {
+            margin-bottom: 1em;
+        }
     }
 
     .vbox-arrow {

client/assets/styles/styles.less

@@ -124,6 +124,7 @@ button, input {
     font-size: 100%;
     flex: 1;
     border-radius: 0.5em;
+    line-height: 2em;
 
     /*the transitions */
     transition-property: border-color, color, background;

client/assets/styles/vbox.less

@@ -33,6 +33,7 @@
         margin: 0;
         background-color: @gray-box;
         height: 3em;
+        line-height: 1em;
         border-width: 0;
 
         :active, :hover, :focus {