From 6cf6c3b11159977eb9aaadd0d0b9c637a7a00d3e Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Wed, 8 Apr 2020 12:57:31 +0100
Subject: [PATCH] feat: wrap modal content around its own div

---
 src/components/template-modal/index.js   |  4 +-
 src/components/template-modal/style.scss | 52 ++++++++++++++----------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/components/template-modal/index.js b/src/components/template-modal/index.js
index fe634d96a..cdca332dc 100644
--- a/src/components/template-modal/index.js
+++ b/src/components/template-modal/index.js
@@ -27,7 +27,9 @@ class TemplateModal extends Component {
 				shouldCloseOnEsc={ false }
 				title={ __( 'Select a layout', 'newspack-newsletters' ) }
       >
-				<p>{ __( 'Layout selector with preview will go here.', 'newspack-newsletters' ) }</p>
+				<div className="newspack-newsletters-modal__content">
+					<p>{ __( 'Layout selector with preview will go here.', 'newspack-newsletters' ) }</p>
+				</div>
 				<Button isPrimary onClick={ closeModal }>
 					{ __( 'Use CURRENTLAYOUT layout', 'newspack-newsletters' ) }
 				</Button>
diff --git a/src/components/template-modal/style.scss b/src/components/template-modal/style.scss
index 441135e5c..efc45250a 100644
--- a/src/components/template-modal/style.scss
+++ b/src/components/template-modal/style.scss
@@ -1,4 +1,28 @@
 .newspack-newsletters-modal {
+	&__screen-overlay {
+		animation: none;
+		background: white;
+		margin-top: 46px;
+
+		@media only screen and (min-width: 783px) {
+			margin-left: 36px;
+			margin-top: 32px;
+
+			// Fullscreen mode
+			.is-fullscreen-mode & {
+				margin-left: 0;
+				margin-top: 0;
+			}
+		}
+
+		@media only screen and (min-width: 961px) {
+			// Not folded sidebar
+			body:not( .folded ) & {
+				margin-left: 160px;
+			}
+		}
+	}
+
 	&__frame {
 		animation: none;
 		border: 0;
@@ -24,27 +48,11 @@
 		}
 	}
 
-	&__screen-overlay {
-		animation: none;
-		background: white;
-		margin-top: 46px;
-
-		@media only screen and (min-width: 783px) {
-			margin-left: 36px;
-			margin-top: 32px;
-
-			// Fullscreen mode
-			.is-fullscreen-mode & {
-				margin-left: 0;
-				margin-top: 0;
-			}
-		}
-
-		@media only screen and (min-width: 961px) {
-			// Not folded sidebar
-			body:not( .folded ) & {
-				margin-left: 160px;
-			}
-		}
+	&__content {
+		align-items: center;
+		background: aliceblue; // test
+		display: flex;
+		height: calc( 100% - 24px - 60px );
+		justify-content: center;
 	}
 }