Remove legacy classes for flexbox classes

admin/client/dist/styles/bundle.css

@@ -15333,10 +15333,30 @@ div.grid-field__sort-field+.form__fieldgroup-item{
   top:1px;
 }
 
+.preview{
+  position:relative;
+}
+
+@media (max-width:991px){
+  .preview{
+    position:absolute;
+    right:0;
+    z-index:2;
+    width:100%;
+  }
+}
+
 .preview__iframe{
-  width:100%;
   height:calc(100% - 53px);
+  width:100%;
   border:0;
+  display:block;
+}
+
+@media (max-width:991px){
+  .preview__iframe{
+    width:100%;
+  }
 }
 
 .preview__file-container{
@@ -15429,6 +15449,7 @@ div.grid-field__sort-field+.form__fieldgroup-item{
   padding-bottom:.76925rem;
   border-top:1px solid #d9dee2;
   width:100%;
+  background-color:#f6f7f8;
 }
 
 .cms-backlink .toolbar__back-button,.toolbar__back-button{
@@ -15893,19 +15914,23 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
   height:100%;
 }
 
-.cms-content__split--left-sm .cms-content__right{
+@media (max-width:991px){
-  display:none;
+  .campaign-items{
+    width:100%;
+    z-index:1;
+  }
 }
 
-.cms-content__split--left-sm .cms-content__left{
+.campaigns{
-  width:100%;
+  position:relative;
+  height:100%;
 }
 
-.cms-content__split--left-sm .cms-content--selected{
+.campaigns .cms-content--selected{
   display:block;
 }
 
-.cms-content__split--left-sm .cms-content__back-btn{
+.campaigns .cms-content__back-btn{
   width:36px;
   height:36px;
   background-color:rgba(79,88,97,.8);
@@ -15924,28 +15949,28 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
   cursor:pointer;
 }
 
-.cms-content__split--left-sm .cms-content__back-btn:hover{
+.campaigns .cms-content__back-btn:hover{
   background-color:#4f5861;
   text-decoration:none;
 }
 
 @media (min-width:992px){
-  .cms-content__split--left-sm .cms-content__left{
+  .campaigns .cms-content__left{
     width:300px;
   }
 
-  .cms-content__split--left-sm .cms-content__right{
+  .campaigns .cms-content__right{
     display:block;
     border-left:1px solid #d9dee2;
   }
 
-  .cms-content__split--left-sm .cms-content__back-btn{
+  .campaigns .cms-content__back-btn{
     display:none;
   }
 }
 
 @media (min-width:1200px){
-  .cms-content__split--left-sm .cms-content__left{
+  .campaigns .cms-content__left{
     width:448px;
   }
 }
@@ -15998,9 +16023,12 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
 
 body,html{
   width:100%;
-  height:100%;
   margin:0;
   padding:0;
+}
+
+.fill-height,body,html{
+  height:100%;
   display:-ms-flexbox;
   display:-webkit-box;
   display:flex;
@@ -16013,15 +16041,14 @@ body,html{
 }
 
 .fill-height,.fill-width{
-  height:100%;
-  display:-ms-flexbox;
-  display:-webkit-box;
-  display:flex;
   -webkit-box-direction:normal;
 }
 
 .fill-width{
   width:100%;
+  display:-ms-flexbox;
+  display:-webkit-box;
+  display:flex;
   -ms-flex-direction:row;
   -webkit-box-orient:horizontal;
           flex-direction:row;

admin/client/src/components/Preview/Preview.js

@@ -57,12 +57,12 @@ class Preview extends SilverStripeComponent {
         </div>
       );
     } else {
-      body = <iframe className="preview__iframe" src={previewUrl}></iframe>;
+      body = <iframe className="flexbox-area-grow preview__iframe" src={previewUrl}></iframe>;
     }
 
     // Combine elements
     return (
-      <div className="flexbox-area-grow cms-content__right preview">
+      <div className="flexbox-area-grow fill-height cms-content__right preview">
         {body}
         <a href="" className="cms-content__back-btn font-icon-left-open-big" />
         <div className="toolbar toolbar--south">

admin/client/src/components/Preview/Preview.scss

@@ -1,7 +1,24 @@
+.preview {
+  position: relative;
+
+  // Overlay preview at smaller sizes
+  @include media-breakpoint-down(md) {
+    position: absolute;
+    right: 0;
+    z-index: 2;
+    width: 100%;
+  }
+}
+
 .preview__iframe {
-  width: 100%;
   height: calc(100% - #{$toolbar-total-height});
+  width: 100%;
   border: 0;
+  display: block;
+
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
 }
 
 .preview__file-container {

admin/client/src/components/Toolbar/Toolbar.scss

@@ -71,6 +71,7 @@
   padding-bottom: $spacer-xs;
   border-top: 1px solid $border-color;
   width: 100%;
+  background-color: $background-main;
 }
 
 .toolbar__back-button,

admin/client/src/containers/CampaignAdmin/CampaignAdminList.js

@@ -150,8 +150,8 @@ class CampaignAdminList extends SilverStripeComponent {
     ];
 
     return (
-      <div className="fill-width cms-content__split--left-sm">
+      <div className="fill-width campaigns">
-        <div className="fill-height cms-content__left cms-campaigns" aria-expanded="true">
+        <div className="fill-height campaign-items cms-content__left cms-campaigns" aria-expanded="true">
           <Toolbar showBackButton handleBackButtonClick={this.props.handleBackButtonClick}>
             <BreadcrumbComponent multiline crumbs={this.props.breadcrumbs} />
           </Toolbar>

admin/client/src/styles/_layout.scss

@@ -16,16 +16,16 @@
   height: 100%;
 }
 
-.cms-content__split--left-sm {
+.campaign-items {
-  .cms-content__right {
+  @include media-breakpoint-down(md) {
-    display: none;
-  }
-
-  .cms-content__left {
     width: 100%;
-    // position: absolute;
+    z-index: 1;
-    // left: 0;
   }
+}
+
+.campaigns {
+  position: relative;
+  height: 100%;
 
   // Overlay preview if there isn't enough space for both items and preview
   .cms-content--selected {
@@ -168,7 +168,7 @@ html, body {
 // Nested items take up width
 .fill-width {
   width: 100%;
-  height: 100%;
+  // height: 100%;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: row;