Update layouts to use new container props and be more responsive

packages/server/src/constants/layouts.js

@@ -23,9 +23,8 @@ const EMPTY_LAYOUT = {
             "justify-content": "flex-start",
             "align-items": "stretch",
             "max-width": "100%",
-            "margin-left": "20px",
-            "margin-right": "20px",
             width: "1400px",
+            padding: "20px",
           },
           hover: {},
           active: {},
@@ -34,24 +33,19 @@ const EMPTY_LAYOUT = {
         _children: [],
       },
     ],
-    type: "div",
     _styles: {
       active: {},
       hover: {},
       normal: {
-        display: "flex",
-        "flex-direction": "column",
-        "align-items": "center",
-        "justify-content": "flex-start",
-        "margin-right": "auto",
-        "margin-left": "auto",
         "min-height": "100%",
         "background-image": "#f5f5f5",
       },
       selected: {},
     },
-    className: "",
-    onLoad: [],
+    direction: "column",
+    hAlign: "center",
+    vAlign: "top",
+    size: "grow",
   },
 }
 
@@ -72,10 +66,6 @@ const BASE_LAYOUTS = [
           _component: "@budibase/standard-components/container",
           _styles: {
             normal: {
-              display: "flex",
-              "flex-direction": "row",
-              "justify-content": "flex-start",
-              "align-items": "flex-start",
               background: "#fff",
               width: "100%",
               "box-shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -84,9 +74,6 @@ const BASE_LAYOUTS = [
             active: {},
             selected: {},
           },
-          className: "",
-          onLoad: [],
-          type: "div",
           _instanceName: "Header",
           _children: [
             {
@@ -95,8 +82,6 @@ const BASE_LAYOUTS = [
               _styles: {
                 normal: {
                   "max-width": "1400px",
-                  "margin-left": "auto",
-                  "margin-right": "auto",
                   padding: "20px",
                   "font-weight": "400",
                   "font-size": "16px",
@@ -143,6 +128,10 @@ const BASE_LAYOUTS = [
               ],
             },
           ],
+          direction: "row",
+          hAlign: "center",
+          vAlign: "middle",
+          size: "shrink",
         },
         {
           _id: "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
@@ -155,8 +144,6 @@ const BASE_LAYOUTS = [
               "justify-content": "flex-start",
               "align-items": "stretch",
               "max-width": "100%",
-              "margin-left": "20px",
-              "margin-right": "20px",
               width: "1400px",
               padding: "20px",
             },
@@ -167,24 +154,19 @@ const BASE_LAYOUTS = [
           _children: [],
         },
       ],
-      type: "div",
       _styles: {
         active: {},
         hover: {},
         normal: {
-          display: "flex",
-          "flex-direction": "column",
-          "align-items": "center",
-          "justify-content": "flex-start",
-          "margin-right": "auto",
-          "margin-left": "auto",
           "min-height": "100%",
           background: "#f5f5f5",
         },
         selected: {},
       },
-      className: "",
-      onLoad: [],
+      direction: "column",
+      hAlign: "center",
+      vAlign: "top",
+      size: "grow",
     },
   },
   {
@@ -209,8 +191,6 @@ const BASE_LAYOUTS = [
               "justify-content": "flex-start",
               "align-items": "stretch",
               "max-width": "100%",
-              "margin-left": "20px",
-              "margin-right": "20px",
               width: "1400px",
               padding: "20px",
             },
@@ -221,24 +201,19 @@ const BASE_LAYOUTS = [
           _children: [],
         },
       ],
-      type: "div",
       _styles: {
         active: {},
         hover: {},
         normal: {
-          display: "flex",
-          "flex-direction": "column",
-          "align-items": "center",
-          "justify-content": "center",
-          "margin-right": "auto",
-          "margin-left": "auto",
           "min-height": "100%",
           background: "#f5f5f5",
         },
         selected: {},
       },
-      className: "",
-      onLoad: [],
+      direction: "column",
+      hAlign: "center",
+      vAlign: "top",
+      size: "grow",
     },
   },
 ]

packages/server/src/constants/screens.js

@@ -9,19 +9,12 @@ exports.createHomeScreen = () => ({
     _id: "d834fea2-1b3e-4320-ab34-f9009f5ecc59",
     _component: "@budibase/standard-components/container",
     _styles: {
-      normal: {
-        flex: "1 1 auto",
-        display: "flex",
-        "flex-direction": "column",
-        "justify-content": "flex-start",
-        "align-items": "stretch",
-      },
+      normal: {},
       hover: {},
       active: {},
       selected: {},
     },
     _transition: "fade",
-    type: "div",
     _children: [
       {
         _id: "ef60083f-4a02-4df3-80f3-a0d3d16847e7",
@@ -41,6 +34,10 @@ exports.createHomeScreen = () => ({
       },
     ],
     _instanceName: "Home",
+    direction: "column",
+    hAlign: "stretch",
+    vAlign: "top",
+    size: "grow",
   },
   routing: {
     route: "/",