some resizing

client/instance.css

@@ -188,7 +188,6 @@
 .instance-cryp .skills {
     grid-area: skills;
     display: flex;
-    flex-flow: row;
     border-width: 0px;
 }
 
@@ -375,3 +374,22 @@ button.equip {
 .equip .specs figcaption {
     font-size: 75%;
 }
+
+.thresholds {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    /*justify-content: space-around;*/
+}
+
+.spec-goals figure {
+    margin: 1em 0;
+}
+
+.spec-goals figure svg {
+    height: 1em;
+}
+
+.spec-goals .unmet {
+    opacity: 0.5;
+}

client/src/components/info.component.jsx

@@ -102,12 +102,10 @@ function Info(args) {
 
             return (
                 <div className="info-spec">
-                    <div>
+                    <div> {value.spec} </div>
-                        <div> {value.spec} </div>
+                    <div> {SPEC_CONSTANT[value.spec].description} </div>
-                        <div> {SPEC_CONSTANT[value.spec].description} </div>
+                    <div className="thresholds">
-                        <div className="thresholds">
+                        {thresholdEl}
-                            {thresholdEl}
-                        </div>
                     </div>
                     <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
                         unequip

client/styles.css

@@ -26,12 +26,6 @@ html, body, main {
     /*overflow: hidden;*/
 }
 
-@media (max-width: 1500px) {
-    .cryps {
-        font-size: 75%;
-    }
-}
-
 html {
     box-sizing: border-box;
     margin: 0;
@@ -505,4 +499,18 @@ section .top {
 
 .menu-instance-list table {
     margin-bottom: 2em;
-}
+}
+
+@media (max-height: 900px), (max-width: 1500px) {
+    .cryps {
+        font-size: 75%;
+    }
+
+    svg {
+        height: 1em;
+    }
+
+    .instance-cryp .skills {
+        flex-flow: column;
+    }
+}