instance

html-client/cryps.css

@@ -12,7 +12,10 @@ html, body, .cryps {
     color: whitesmoke;
     font-size: 16pt;
     user-select: none;
-    /*overflow: hidden;*/
+
+    /* this is the sweet nectar to keep it full page*/
+    max-height: 100%;
+    overflow: hidden;
 }
 
 html {
@@ -30,14 +33,15 @@ html {
 /* main container */
 .cryps {
     padding: 0 2em;
-    position: fixed;
     display: flex;
     flex-flow: column;
+    position: fixed;
 }
 
 main {
     display: flex;
     flex-flow: row wrap;
+    flex: 1 1 90%;
 }
 
 button, input {
@@ -79,9 +83,9 @@ button.left:hover, button.left:focus {
     MENU
 */
 header {
-    margin-bottom: 1em;
     display: flex;
     flex-flow: row;
+    flex: 1;
 }
 
 .header-title {
@@ -130,7 +134,7 @@ header {
     display: flex;
     flex-flow: row wrap;
 
-    flex: 1 0 50%;
+    flex: 0 0 50%;
 }
 
 .menu-cryp-ctr {
@@ -185,6 +189,7 @@ header {
 .instance {
     display: flex;
     flex-flow: row wrap;
+    align-content: flex-start;
 }
 
 .instance-hdr {
@@ -199,11 +204,11 @@ header {
 }
 
 .instance .spacer {
-    flex: 1;
+    flex-grow: 1
 }
 
 .menu-btn {
-    flex: 1 0 33%;
+    flex: 1 0 25%;
 }
 
 .ready-btn {
@@ -223,10 +228,11 @@ header {
 .instance-ui-btn {
     font-size: 100%;
     padding: 0;
+    margin: 0;
 }
 
 .vbox {
-    flex: 1 0 25%;
+    flex: 0 0 25%;
 
     display: flex;
     flex-flow: row wrap;
@@ -276,7 +282,7 @@ header {
 }
 
 .spacer {
-    flex: 1;
+    flex: 1 0 25%;
 }
 
 .cryp-list {
@@ -285,19 +291,21 @@ header {
 }
 
 .instance-cryp-list {
-    padding-left: 2em;
     flex: 0 0 25%;
 
     display: flex;
     flex-flow: column;
+
+    padding: 0 2em 0 2em;
 }
 
 /* CRYP BOX */
 .cryp-box {
-    flex: 0 1 auto;
+    flex: 1;
 
     display: flex;
     flex-flow: row wrap;
+    justify-content: center;
     /*
         this controls the size of the box
         as it fills the whole container
@@ -306,11 +314,6 @@ header {
     border: 1px solid whitesmoke;
 }
 
-/*cheeky one to push them in line with the buttons */
-.instance .cryp-box:first-child {
-    margin-top: -2.5em;
-}
-
 .cryp-box figure {
     margin: 0;
     flex: 0 1 50%;

html-client/src/components/instance.component.jsx

@@ -80,7 +80,7 @@ function InstanceComponent(args) {
     const cryps = instance.cryps.map(c => Cryp(c, sendVboxApply, setInfo));
 
     return (
-        <section className="instance" >
+        <main className="instance" >
             <div className="instance-hdr">
                 <button
                     className="instance-btn instance-ui-btn menu-btn left"
@@ -101,7 +101,7 @@ function InstanceComponent(args) {
                 {cryps}
             </div>
             <InfoContainer />
-        </section>
+        </main>
     );
 }