mobile styles

client/assets/styles/instance.mobile.css

@@ -1,20 +1,20 @@
 @media (max-height: 800px), (max-width: 1000px) {
     .instance {
         display: grid;
-        grid-template-columns: 100%;
-        grid-template-rows: repeat(4, min-content);
+        grid-template-columns: 1fr;
+        grid-template-rows: min-content, min-content, min-content, 1fr;
         grid-template-areas:
             "top"
             "controls"
-            "first"
-            "second"
+            "mvbox"
+            "mcryps"
     }
     /* Default view */
     .instance .equip { display: none; }
     .instance .info { display: none; }
     .instance .cryp-list { display: none; }
     .vbox {
-        grid-area: first;
+        grid-area: mvbox;
         display: grid;
         grid-template-rows: min-content min-content min-content;
         grid-template-columns: 1fr;
@@ -47,7 +47,7 @@
     #toggle-vbox:checked ~ .vbox { display: none; }
     #toggle-vbox:checked ~ .equip {
         display: initial;
-        grid-area: first;
+        grid-area: mvbox;
     }
 
     #toggle-vbox:checked ~ .highlight {
@@ -55,14 +55,13 @@
     }
 
     #toggle-vbox:checked ~ .cryp-list {
-        grid-area: second;
-        display: flex;
+        grid-area: mcryps;
+        display: grid;
         justify-content: center;
-        flex-flow: row wrap;
-        flex: 1;
-        width: 100%;
-    }
 
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+    }
 
     #toggle-vbox { display: none; }
 
@@ -76,15 +75,20 @@
         margin-right: 0.5em;
     }
 
+    .instance .cryp-list {
+        display: grid;
+        grid-auto-columns: 1fr 1fr;
+    }
+
     .cryp-list .skills {
         flex-flow: row;
         align-items: stretch;
     }
 
     .instance-cryp {
-        flex: 1;
+        grid-row: 2;
         display: grid;
-        grid-template-rows: min-content min-content;
+        grid-template-rows: min-content 1fr;
         grid-template-areas:
             "name   "
             "avatar ";
@@ -95,9 +99,6 @@
         transition-delay: 0;
         transition-timing-function: ease;
     }
-    .instance-cryp img {
-        width: 35px;
-    }
 
     .instance-cryp .skills {
         display: none;
@@ -113,10 +114,10 @@
 
 
     .instance-cryp-active {
-        flex: 1;
-        order: -1;
+        grid-row: 1;
+        grid-column: 1 / 3;
         display: grid;
-        grid-template-rows: min-content min-content min-content min-content min-content;
+        grid-template-rows: min-content min-content min-content 1fr min-content;
         grid-template-areas:
             "name   "
             "skills "

client/src/utils.jsx

@@ -80,10 +80,10 @@ function clearAnimation(id) {
 }
 
 function crypAvatar(name, id) {
-    useEffect(() => {
-        animateCryp(id);
-        return () => clearAnimation(id);
-    });
+    // useEffect(() => {
+    //     animateCryp(id);
+    //     return () => clearAnimation(id);
+    // });
 
     return (
         <img
@@ -96,7 +96,10 @@ function crypAvatar(name, id) {
 }
 
 function instanceCryp(name, id) {
-    useEffect(() => animateCryp(id));
+    // useEffect(() => {
+    //     animateCryp(id);
+    //     return () => clearAnimation(id);
+    // });
 
     return (
         <div