mobile stuff

client/cryps.css

@@ -27,6 +27,14 @@ html {
   box-sizing: inherit;
 }
 
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.5em;
+}
+
 
 /* main container */
 .cryps {
@@ -148,13 +156,11 @@ header {
 
 .header-title {
     flex: 1;
-    font-size: 2em;
     letter-spacing: 0.05em;
 }
 
 .header-username {
     letter-spacing: 0.05em;
-    font-size: 2em;
     display: inline;
 }
 
@@ -210,7 +216,6 @@ header {
 }
 
 .spawn-btn .menu-cryp h2 {
-    font-size: 3em;
     flex: 1;
 }
 
@@ -241,10 +246,6 @@ header {
     transition-timing-function: ease;
 }
 
-.menu-cryp h2 {
-    font-size: 2em;
-}
-
 .menu-instance-list {
     flex: 0 0 50%;
     flex-flow: row wrap;
@@ -257,8 +258,7 @@ header {
 .menu-instance-btn {
     box-sizing: border-box;
     flex: 1 1 100%;
-    font-size: 150%;
-    /*min-width: 20%;*/
+    font-size: 1.5em;
     border-width: 2px;
     padding: 0.5em;
     margin-right: 0.5em;
@@ -320,6 +320,7 @@ header {
     display: flex;
     flex-flow: row wrap;
     align-content: flex-start;
+    min-width: 250px;
 }
 
 .vbox-hdr {
@@ -375,6 +376,8 @@ header {
     flex-flow: column;
     height: 95%;
     padding: 0 2em 0 2em;
+
+    min-width: 300px;
 }
 
 /* CRYP BOX */
@@ -504,3 +507,20 @@ header {
     padding-left: 2em;
     flex: 1;
 }
+
+@media (max-width: 800px) {
+    .cryps {
+        font-size: 0.75em;
+        padding: 0 1em;
+    }
+
+    .menu-instance-btn {
+        font-size: 1em;
+    }
+
+    .cryp-list {
+        height: unset;
+        padding: 0;
+    }
+
+}

client/src/components/header.component.jsx

@@ -7,7 +7,7 @@ function renderHeader(args) {
     const { account } = args;
     const accountStatus = account ?
         (<div className="header-status">
-            <h3 className="header-username">{account.name}</h3>
+            <h1 className="header-username">{account.name}</h1>
             {saw('stat-icon')}
         </div>)
         : '';

client/src/components/vbox.component.jsx

@@ -55,6 +55,7 @@ function Vbox(args) {
                 key={j}
                 onClick={() => { if (c) return setInfo('item', c)}}
                 onDblClick={() => sendVboxAccept(j, i) }
+                onTouchStart={() => sendVboxAccept(j, i) }
                 >
                 {convertVar(c)}
             </td>