Base styling.

packages/editor/src/components/post-preview-button/index.js

@@ -126,19 +126,23 @@ export class PostPreviewButton extends Component {
 					onRequestClose={ this.closePreviewWindow }
 					className="editor-block-preview"
 				>
-					<button onClick={ this.setDesktopPreview }>Desktop</button>
-					<button onClick={ this.setTabletPreview }>Tablet</button>
-					<button onClick={ this.setMobilePreview }>Mobile</button>
-					<iframe
-						title="tehPreview"
-						src={ previewLink }
-						style={
-							{
-								width: this.state.previewSize.width,
-								height: this.state.previewSize.height,
+					<div className="editor-block-preview__controls">
+						<button onClick={ this.setDesktopPreview }>Desktop</button>
+						<button onClick={ this.setTabletPreview }>Tablet</button>
+						<button onClick={ this.setMobilePreview }>Mobile</button>
+					</div>
+					<div className="editor-block-preview__frame">
+						<iframe
+							title="tehPreview"
+							src={ previewLink }
+							style={
+								{
+									width: this.state.previewSize.width,
+									height: this.state.previewSize.height,
+								}
 							}
-						}
-					></iframe>
+						></iframe>
+					</div>
 				</Modal>
 				}
 			</>

packages/editor/src/components/post-preview-button/style.scss

@@ -0,0 +1,18 @@
+.editor-block-preview {
+	@include break-small() {
+		top: 5%;
+		right: 5%;
+		bottom: 5%;
+		left: 5%;
+		transform: none;
+	}
+}
+
+.editor-block-preview__controls {
+	margin: $grid-size-large 0;
+}
+
+.editor-block-preview__frame {
+	display: flex;
+	justify-content: center;
+}

packages/editor/src/style.scss

@@ -9,6 +9,7 @@
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
 @import "./components/post-permalink/style.scss";
+@import "./components/post-preview-button/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
 @import "./components/post-taxonomies/style.scss";