:)

client/instance.css

@@ -14,11 +14,22 @@
         "cryps  cryps   info";
 }
 
+@media (max-width: 1920px) {
+    .instance {
+        grid-template-columns: 2fr 2fr 1fr;
+    }
+
+    .instance .info table td svg {
+        height: 50%;
+    }
+}
+
 .instance .top {
     grid-area: top;
 }
 
 .instance .info {
+    font-size: 75%;
     margin-left: 1em;
     grid-area: info;
     display: flex;
@@ -61,14 +72,19 @@
 
 
 .vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
-    color: black;
+    color: white;
 }
 
-.vbox-btn.reclaiming, .vbox-btn.reclaiming:hover {
-    color: #a52a2a;
+.vbox-btn.reclaiming, .vbox-btn.reclaim.reclaiming:hover {
+    background: #a52a2a;
+    color: black;
     box-shadow: inset 0.5em 0 0 0 #a52a2a;
 }
 
+.vbox-btn.reclaim:hover {
+    color: #a52a2a;
+}
+
 .vbox-hdr {
     display: flex;
     align-items: flex-end;
@@ -88,17 +104,12 @@
 .vbox button {
     width: 100%;
     margin: 0;
-    background-color: #444;
-    color: black;
+    background-color: #333;
     border-width: 0;
 }
 
-.vbox-btn:hover {
-    color: black;
-}
-
 .vbox-table td {
-    transition-property: all;
+    transition-property: color background border;
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: ease;
@@ -106,8 +117,7 @@
 }
 
 .vbox-table table td:active {
-    background-color: #444;
-    color: black;
+    background-color: #333;
 }
 
 /* CRYP LIST */
@@ -143,6 +153,7 @@
 
 .instance-cryp .name {
     grid-area: name;
+    margin-bottom: 0.5em;
 }
 
 .instance-cryp .avatar {

client/src/components/vbox.component.jsx

@@ -212,7 +212,7 @@ function Vbox(args) {
     }
 
     const classes = `vbox ${vboxHidden ? 'hidden' : ''}`;
-    const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`;
+    const reclaimClass = `instance-btn instance-ui-btn vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`;
 
     return (
         <div className={classes}>

client/styles.css

@@ -58,7 +58,7 @@ figure {
 main {
     padding: 0 2em;
     display: grid;
-    grid-template-columns: 200px 1fr;
+    grid-template-columns: 1fr 8fr;
     grid-template-rows: min-content 1fr;
     grid-template-areas:
       "hd  hd"
@@ -194,8 +194,8 @@ table td svg {
 }
 
 table .highlight {
-    background: whitesmoke;
-    color: black;
+    background: #333;
+    color: whitesmoke;
     font-weight: bold;
 }