Add sidebar to the form preview

[MAILPOET-2811]

assets/css/src/components-form-editor/_preview.scss

@@ -14,13 +14,6 @@
   min-height: 100%;
   min-width: 100%;
 
-  .mailpoet_form_preview_type_select {
-    position: absolute;
-    top: 20px;
-    left: 40px;
-    z-index: 11;
-  }
-
   .mailpoet-modal-header {
     height: 20px;
     margin-bottom: 0;
@@ -41,6 +34,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    width: 100%;
 
     .mailpoet_spinner_wrapper {
       left: 0;
@@ -75,3 +69,14 @@
   right: 0;
   width: 380px;
 }
+
+.mailpoet_preview_content_wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+
+  .mailpoet_preview_sidebar {
+    padding: 10px 10px 10px 0;
+    width: 300px;
+  }
+}

assets/js/src/form_editor/components/preview.tsx

@@ -69,8 +69,8 @@ const FormPreview = () => {
         </div>
       )}
       {isPreviewReady && (
-        <>
+        <div className="mailpoet_preview_content_wrapper">
-          <div className="mailpoet_form_preview_type_select">
+          <div className="mailpoet_preview_sidebar">
             <label>
               {MailPoet.I18n.t('formPlacementLabel')}
               {' '}
@@ -86,6 +86,7 @@ const FormPreview = () => {
                 <option value="slide_in">{MailPoet.I18n.t('placeSlideInFormOnPages')}</option>
               </select>
             </label>
+            <p>Todo width and placement settings.</p>
           </div>
           <Preview
             onDisplayTypeChange={onPreviewTypeChange}
@@ -110,7 +111,7 @@ const FormPreview = () => {
               </div>
             )}
           </Preview>
-        </>
+        </div>
       )}
     </Modal>
   );