styling improvements for effect text, move down opp avatars on mobile

client/assets/styles/game.less

@@ -10,10 +10,6 @@
     //     "opponent"
     //     "target  "
     //     "player  ";
-
-    .skill-description {
-        font-size: 75%;
-    }
 }
 
 .game .team, .faceoff .team {
@@ -101,7 +97,7 @@
     justify-items: center;
 
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 2fr;
+    grid-template-rows: minmax(min-content, 1fr) min-content;
     grid-template-areas:
         "left"
          "right";

client/assets/styles/styles.mobile.less

@@ -40,7 +40,7 @@
                 }
 
                 svg {
-                    height: 1em;
+                    height: 1.5em;
                 }
             }
 
@@ -54,6 +54,13 @@
                 font-size: 1em;
             }
 
+            .skill-description {
+                font-size: 0.8em;
+                svg {
+                    height: 1em;
+                }
+            }
+
             .player {
                 .game-construct {
                     grid-template-areas:
@@ -85,7 +92,7 @@
                 }
 
                 .avatar {
-                    bottom: 0px;
+                    top: 3em;
                 }
             }
         }

client/src/components/game.construct.jsx

@@ -146,11 +146,9 @@ class GameConstruct extends Component {
                 const speed = <span> Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}% </span>;
                 return (
                     <div class="skill-description">
-                        <span>
-                            <h2> {gameSkillInfo.skill} </h2>
-                            {infoDescription}
-                            {speed}
-                        </span>
+                        <h2><span> {gameSkillInfo.skill} </span></h2>
+                        <span>{infoDescription} </span>
+                        {speed}
                     </div>);
             }
             const effects = construct.effects.length