Rework layout of main post revisions containers (#20232)

Automattic · Nov 27, 2017 · 1c76468 · 1c76468
1 parent cf1be54
commit 1c76468
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/client/post-editor/editor-diff-viewer/style.scss b/client/post-editor/editor-diff-viewer/style.scss
@@ -1,20 +1,11 @@
 /** @format */
 .editor-diff-viewer {
+	flex: 1;
 	margin: 0;
-	position: absolute;
-	top: 120px;
-	bottom: 72px;
-	left: 0;
-	width: 100%;
-	box-sizing: border-box;
 	padding: 24px 32px 32px 32px;
+	box-sizing: border-box;
 	overflow-y: auto;
 
-	@include breakpoint( '>660px' ) {
-		top: 0;
-		width: calc(100% - 230px);
-	}
-
 	.editor-diff-viewer__title {
 		font-family: $serif;
 		font-size: 32px;

diff --git a/client/post-editor/editor-revisions-list/style.scss b/client/post-editor/editor-revisions-list/style.scss
@@ -3,21 +3,16 @@
 @import 'components/accordion/style';
 
 .editor-revisions-list {
-	position: absolute;
-	top: 0;
-	right: 0;
+	position: relative;
 	background: $gray-light;
-
-	@include breakpoint( '<660px' ) {
-		left: 0;
-		height: 120px;
-	}
+	flex-basis: 120px;
+	flex-grow: 0;
+	flex-shrink: 0;
 
 	@include breakpoint( '>660px' ) {
 		border-left: 1px solid darken($sidebar-bg-color, 5%);
 		z-index: 1; // Put the list above the action-buttons:before overlay gradient. -shaun
-		width: 230px;
-		bottom: 73px;
+		flex-basis: 230px;
 	}
 }
 
@@ -54,6 +49,10 @@
 	bottom: 0;
 	left: 0;
 	overflow-y: auto;
+
+	@include breakpoint( '<660px' ) {
+		overflow-y: hidden;
+	}
 }
 
 .editor-revisions-list__list {

diff --git a/client/post-editor/editor-revisions/style.scss b/client/post-editor/editor-revisions/style.scss
@@ -1,12 +1,19 @@
 /** @format */
 .editor-revisions__dialog {
+	display: flex;
 	padding: 0;
-	overflow-x: hidden;
 }
 
 .editor-revisions__wrapper {
-	height: 100vh;
-	width: 100vw;
+	display: flex;
+	width: 90vw;
+	height: calc(90vh - 73px);
+
+	@include breakpoint( '<660px' ) {
+		flex-direction: column-reverse;
+		width: 100vw;
+		height: calc(100vh - 73px);
+	}
 }
 
 .editor-revisions__wpadmin-link {