fucking css

client/cryps.css

@@ -95,6 +95,7 @@ button.hidden {
 }
 
 svg {
+    flex: 1;
     fill: none;
     stroke: whitesmoke;
     stroke-width: 0;
@@ -484,19 +485,23 @@ header {
 }
 
 .team-player {
-    display: flex;
-    flex: 1 0 20%;
-    height: 90%;
     padding: 0;
 }
 
 .team-opponent {
-    display: flex;
-    flex: 1 0 20%;
-    height: 90%;
     padding: 0;
 }
 
+.team-opponent .cryp-box-top {
+    flex-flow: column;
+    justify-content: center;
+    align-items: stretch;
+}
+
+.team-opponent .cryp-box-top figure {
+    flex: 1;
+}
+
 .logs {
     flex: 0 0 100%;
 }
@@ -524,6 +529,11 @@ header {
         padding: 0 1em;
     }
 
+    /*fucken beats me why needed */
+    .cryp-box .skills {
+        height: unset;
+    }
+
     .menu-instance-btn {
         font-size: 1em;
     }
@@ -533,4 +543,14 @@ header {
         padding: 0;
     }
 
+    .selected-skills {
+        display: none;
+    }
+
+}
+
+@media (max-width: 1000px) {
+    .selected-skills {
+        display: none;
+    }
 }

client/src/components/game.component.jsx

@@ -206,7 +206,7 @@ function GamePanel(props) {
             <div className="selected-skills">
                 {selectedSkills}
             </div>
-            <div className="team-opponent">
+            <div className="team-opponent cryp-list">
                 {otherTeams.map(OpponentTeam)}
             </div>
         </main>