diff --git a/client/cryps.css b/client/cryps.css
index 9589d1ad..c5b9ce90 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -372,16 +372,33 @@ header {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(12, 1fr);
- grid-template-rows: repeat(6, 1fr);
+ grid-template-rows: repeat(7, 1fr);
grid-template-areas:
"n v v v v v v v v v v v"
"n v v v v v v v v v v v"
+ "g g g g g g g g g g g g"
"f f f f f f f f f f f f"
"f f f f f f f f f f f f"
"f f f f f f f f f f f f"
"f f f f f f f f f f f f";
}
+.instance-hdr {
+ gird-area: n;
+ display: flex;
+ flex-flow: row;
+
+ flex: 0 0 100%;
+}
+
+.instance-info {
+ flex: 0 0 50%;
+}
+
+.instance .spacer {
+ flex-grow: 1
+}
+
.vbox {
grid-area: v;
display: grid;
@@ -408,22 +425,6 @@ header {
flex-flow: row wrap;
}
-.instance-hdr {
- gird-area: n;
- display: flex;
- flex-flow: row;
-
- flex: 0 0 100%;
-}
-
-.instance-info {
- flex: 0 0 50%;
-}
-
-.instance .spacer {
- flex-grow: 1
-}
-
.menu-btn, .nav-btn {
flex: 1 0 25%;
}
@@ -568,10 +569,9 @@ table td svg {
flex: 1 1 25%;
display: flex;
- flex-flow: column;
- height: 94%;
+ flex-flow: row;
padding: 0 2em 0 2em;
-
+ justify-content: center;
min-width: 300px;
overflow: hidden;
@@ -584,9 +584,9 @@ table td svg {
display: flex;
flex-flow: column;
border: 1px solid whitesmoke;
- margin-bottom: 1em;
+ margin-left: 1em;
justify-content: center;
-
+ max-width: 350px;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0;
@@ -595,7 +595,7 @@ table td svg {
.instance-cryp-top {
display: flex;
- flex: 1 1 75%;
+ flex: 1 1 auto;
width: 100%;
justify-content: center;
align-items: stretch;
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 7632d7ac..faeec2bd 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -92,9 +92,11 @@ function InstanceComponent(args) {
{timer}
-
);
}
+
+// Removed while WIP
+
module.exports = InstanceComponent;