more understandable screenslot & default header on master screen

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -25,16 +25,10 @@
     name: "Screen Placeholder",
     route: "*",
     props: {
-      "_id": "49c3d0a2-7028-46f0-b004-7eddf62ad01c",
+      "_id": "screenslot-placeholder",
       "_component": "@budibase/standard-components/container",
       "_styles": {
-        "normal": {
+        "normal": {},
-          "padding": "0px",
-          "font-family": "Roboto",
-          "border-width": "0",
-          "border-style": "None",
-          "text-align": "center"
-        },
         "hover": {},
         "active": {},
         "selected": {}
@@ -45,14 +39,13 @@
       "type": "div",
       "_children": [
         {
-          "_id": "335428f7-f9ca-4acd-9e76-71bc8ad27324",
+        "_id": "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
         "_component": "@budibase/standard-components/container",
         "_styles": {
           "normal": {
-              "padding": "16px",
+            "display": "flex",
-              "border-style": "Dashed",
+            "flex-direction": "column",
-              "border-width": "2px",
+            "align-items": "center"
-              "border-color": "#8a8989fa"
           },
           "hover": {},
           "active": {},
@@ -62,15 +55,16 @@
         "className": "",
         "onLoad": [],
         "type": "div",
-          "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+        "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
         "_instanceName": "Container",
         "_children": [
           {
-              "_id": "ddb6a225-33ba-4ba8-91da-bc6a2697ebf9",
+            "_id": "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
             "_component": "@budibase/standard-components/heading",
             "_styles": {
               "normal": {
-                  "font-family": "Roboto"
+                "width": "500px",
+                "padding": "8px"
               },
               "hover": {},
               "active": {},
@@ -78,11 +72,51 @@
             },
             "_code": "",
             "className": "",
-              "text": "Your screens go here",
+            "text": "Screenslot",
             "type": "h1",
-              "_instanceId": "inst_b3b4e95_ab0df02dda3f4d8eb4b35eea2968bad3",
+            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
             "_instanceName": "Heading",
             "_children": []
+          },
+          {
+            "_id": "71a3da65-72c6-4c43-8c6a-49871c07b77d",
+            "_component": "@budibase/standard-components/text",
+            "_styles": {
+              "normal": {
+                "max-width": "",
+                "text-align": "left",
+                "width": "500px",
+                "padding": "8px"
+              },
+              "hover": {},
+              "active": {},
+              "selected": {}
+            },
+            "_code": "",
+            "text": "The screens that you create will be displayed inside this box.",
+            "type": "none",
+            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+            "_instanceName": "Text"
+          },
+          {
+            "_id": "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
+            "_component": "@budibase/standard-components/text",
+            "_styles": {
+              "normal": {
+                "max-width": "",
+                "text-align": "left",
+                "width": "500px",
+                "padding": "8px"
+              },
+              "hover": {},
+              "active": {},
+              "selected": {}
+            },
+            "_code": "",
+            "text": "This box is just a placeholder, to show you the position of screens.",
+            "type": "none",
+            "_instanceId": "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
+            "_instanceName": "Text"
           }
         ]
       }

packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js

@@ -24,6 +24,16 @@ export default `<html>
           text-transform: uppercase;
           font-weight: bold;
         }
+
+        .container-screenslot-placeholder {
+          padding: 20px;
+          text-align: center;
+          border-style: dashed !important;
+          border-width: 1px;
+          color: #806fde;
+          background: #e9e6ff44;
+          height: 100%;
+        }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>

packages/server/src/utilities/appDirectoryTemplate/pages/main/page.json

@@ -7,11 +7,56 @@
 		"_id": "private-master-root",
     "_component": "@budibase/standard-components/container",
     "_children": [
+      {
+        "_id": "c32dd256-a61c-4c41-876e-95e91c5e3a43",
+        "_component": "@budibase/standard-components/container",
+        "_styles": {
+          "normal": {
+            "background": "#e8e8ef",
+            "padding": "8px",
+            "color": "#393C44",
+            "display": "N/A",
+            "flex-direction": "column"
+          },
+          "hover": {},
+          "active": {},
+          "selected": {}
+        },
+        "_code": "",
+        "className": "",
+        "onLoad": [],
+        "type": "div",
+        "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
+        "_instanceName": "Container",
+        "_children": [
+          {
+            "_id": "fbd9520f-6b34-4e3e-828d-0197144568a1",
+            "_component": "@budibase/standard-components/heading",
+            "_styles": {
+              "normal": {},
+              "hover": {},
+              "active": {},
+              "selected": {}
+            },
+            "_code": "",
+            "className": "",
+            "text": "{{ name }}",
+            "type": "h1",
+            "_instanceId": "inst_1808f0d_e1277174d255421784ef2467d470abc8",
+            "_instanceName": "Heading",
+            "_children": []
+          }
+        ]
+      },
       {
         "_id": "7fcf11e4-6f5b-4085-8e0d-9f3d44c98967",
         "_component": "##builtin/screenslot",
         "_styles": {
-          "normal": {},
+          "normal": {
+            "padding": "8px",
+            "align-items": "flex-start",
+            "height": "100vh"
+          },
           "hover": {},
           "active": {},
           "selected": {}
@@ -24,10 +69,18 @@
     "_styles": {
       "active": {},
       "hover": {},
-			"normal": {},
+      "normal": {
+        "display": "flex",
+        "flex-direction": "column",
+        "align-items": "stretch",
+        "justify-content": "flex-start",
+        "height": "100vh"
+      },
       "selected": {}
     },
-		"_code": ""
+    "_code": "",
+    "className": "",
+    "onLoad": []
 	},
 	"_css": "",
 	"uiFunctions": ""