refactor console position in detached mode. fixes #319

src/components/ContentWrap.jsx

@@ -549,6 +549,7 @@ export default class ContentWrap extends Component {
 			trackEvent('ui', 'updateCodeMode', mode);
 		}
 	}
+
 	detachPreview() {
 		if (this.detachedWindow) {
 			this.detachedWindow.focus();
@@ -558,7 +559,6 @@ export default class ContentWrap extends Component {
 		const iframeWidth = iframeBounds.width;
 		const iframeHeight = iframeBounds.height;
 		document.body.classList.add('is-detached-mode');
-		window.globalConsoleContainerEl.insertBefore(window.consoleEl, null);
 
 		this.detachedWindow = window.open(
 			'./preview.html',
@@ -574,7 +574,6 @@ export default class ContentWrap extends Component {
 			if (this.detachedWindow && this.detachedWindow.closed) {
 				clearInterval(intervalID);
 				document.body.classList.remove('is-detached-mode');
-				$('#js-demo-side').insertBefore(window.consoleEl, null);
 				this.detachedWindow = null;
 				// Update main frame preview to get latest changes (which were not
 				// getting reflected while detached window was open)

src/components/app.jsx

@@ -1181,7 +1181,7 @@ export default class App extends Component {
 						onEditorFocus={this.editorFocusHandler.bind(this)}
 						onSplitUpdate={this.splitUpdateHandler.bind(this)}
 					/>
-					<div class="global-console-container" id="globalConsoleContainerEl" />
+
 					<Footer
 						prefs={this.state.prefs}
 						layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}

src/style.css

@@ -6,6 +6,9 @@
 	--color-button: #d3a447;
 	--color-focus-outline: #d3a447;
 	--color-form-control-bg: #2c214b;
+
+	--footer-height: 37px;
+	--console-height: 30px;
 }
 
 body {
@@ -403,7 +406,9 @@ body:not(.light-version).overlay-visible .main-container {
 }
 
 .is-detached-mode .demo-side {
-	display: none;
+	/* display: none; */
+	width: 0px !important;
+	height: 0px !important;
 }
 
 .is-detached-mode .code-side {
@@ -1418,12 +1423,6 @@ body > #demo-frame {
 	cursor: ns-resize;
 }
 
-.global-console-container {
-	display: none;
-	position: relative;
-	height: 35px;
-}
-
 /* Detached mode */
 
 .is-detached-mode .console,
@@ -1431,8 +1430,14 @@ body > #demo-frame {
 	z-index: 4;
 }
 
-.is-detached-mode .global-console-container {
-	display: block;
+.is-detached-mode .console {
+	position: fixed;
+	bottom: var(--footer-height);
+}
+
+.is-detached-mode .content-wrap {
+	/* So that there is space for console */
+	padding-bottom: var(--console-height);
 }
 
 .kbd-shortcut__keys {