more menu

client/cryps.css

@@ -289,16 +289,31 @@ header {
 }
 
 .menu-instance-btn {
-    box-sizing: border-box;
     flex: 1 1 100%;
-    font-size: 1.5em;
-    border-width: 2px;
-    padding: 0.5em;
-    margin-right: 0.5em;
+    font-size: 1.2em;
+}
+
+.create-form {
+    flex: 1;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    border: 1px solid whitesmoke;
+    padding: 1em;
+    margin-bottom: 1.5em;
+}
+
+.create-form select, .create-form input, .create-form label {
+    margin: 0;
 }
 
 .create-form button {
+    flex: 0 1 25%;
+    font-size: 1.5em;
     display: block;
+    margin-bottom: 0;
 }
 
 /*
@@ -415,6 +430,7 @@ header {
 table {
     table-layout: fixed;
     width: 100%;
+    margin-bottom: 2em;
 }
 
 table td {

client/src/components/instance.create.form.jsx

@@ -51,10 +51,7 @@ class InstanceCreateForm extends Component {
 
     render() {
         return (
-            <div
-                className="">
             <div className="create-form">
-                    <div>+</div>
                 <label>instance name</label>
                 <input
                     className="login-input"
@@ -76,10 +73,9 @@ class InstanceCreateForm extends Component {
                 <button
                     onClick={this.handleSubmit}
                     type="submit">
-                        create
+                    +
                 </button>
             </div>
-            </div>
         );
     }
 }

client/src/components/menu.component.jsx

@@ -80,8 +80,8 @@ function Menu(args) {
                         {instancePanels}
                     </tbody>
                 </table>
-                {mmSet}
                 <InstanceCreateForm />
+                {mmSet}
             </section>
         );
     }