Use mobile slideout styling within live preview

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- When slideouts are opened within Live Preview, they now slide up over the editor pane, rather than covering the preview pane. ([#13739](https://github.com/craftcms/cms/pull/13739))
 - Fixed a bug where it wasn’t always possible to create new entries from custom sources which were limited to one section.
 - Fixed a bug where relational fields weren’t factoring in cross-site elements when enforcing their “Min Relations”, “Max Relations”, and “Validate related entries” settings. ([#13699](https://github.com/craftcms/cms/issues/13699))
 - Fixed a bug where pagination wasn’t working for admin tables, if the `onQueryParams` callback method wasn’t set. ([#13677](https://github.com/craftcms/cms/issues/13677))

src/web/assets/cp/src/css/_main.scss

@@ -4007,7 +4007,7 @@ ul.tree,
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin: calc(var(--s) * -1) calc(var(--xl) * -1);
+  margin: calc(var(--s) * -1) calc(var(--padding) * -1);
 
   &:first-child {
     border-radius: var(--large-border-radius) var(--large-border-radius) 0 0;
@@ -4060,7 +4060,7 @@ ul.tree,
         flex-direction: row;
         align-items: center;
         position: relative;
-        padding: 0 24px;
+        padding: 0 var(--padding);
         white-space: nowrap;
         color: var(--tab-label-color);
         height: 50px;
@@ -4565,6 +4565,14 @@ $min2ColWidth: 400px;
   height: -webkit-fill-available; // h/t https://twitter.com/AllThingsSmitty/status/1254151507412496384
   pointer-events: none;
 
+  &.so-lp {
+    position: absolute;
+    top: var(--m);
+    left: var(--m);
+    width: calc(100% - var(--m) * 2);
+    height: calc(100vh - var(--m) * 2);
+  }
+
   body.has-debug-toolbar & {
     height: calc(100vh - 42px);
   }
@@ -4580,22 +4588,30 @@ $min2ColWidth: 400px;
   overflow: hidden;
   padding: 24px var(--padding);
   pointer-events: all;
+  container-type: inline-size;
 
-  &.so-mobile {
-    --padding: 14px;
-    --neg-padding: -14px;
-    width: 100%;
-    height: 100%;
+  &.so-mobile,
+  &.so-lp {
+    width: 100% !important;
+    height: 100% !important;
     left: 0;
     transition: top linear 250ms;
     will-change: top;
   }
 
+  &.so-mobile {
+    --padding: 14px;
+    --neg-padding: -14px;
+  }
+
   &:not(.so-mobile) {
+    border-radius: var(--large-border-radius);
+  }
+
+  &:not(.so-mobile):not(.so-lp) {
     top: 8px;
     width: calc(50% - 8px);
     height: calc(100% - 16px);
-    border-radius: var(--large-border-radius);
 
     @media screen and (prefers-reduced-motion: no-preference) {
       body.ltr & {
@@ -4611,6 +4627,8 @@ $min2ColWidth: 400px;
   }
 
   & > .pane-header {
+    padding-left: var(--padding);
+    padding-right: var(--padding);
     z-index: 2;
 
     & > .so-toolbar {
@@ -4628,11 +4646,6 @@ $min2ColWidth: 400px;
     }
   }
 
-  &.so-mobile > .pane-header {
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-
   & > .so-body {
     flex: 1;
     margin: -24px var(--neg-padding) 0;
@@ -4730,7 +4743,7 @@ $min2ColWidth: 400px;
   }
 }
 
-@media (min-width: 1536px) {
+@container (width > 700px) {
   .slideout {
     &.has-sidebar {
       .pane-header:not(.so-visible) {

src/web/assets/cp/src/css/_preview.scss

@@ -9,7 +9,7 @@
   background-color: var(--white);
   z-index: 100;
 
-  header {
+  & > header {
     padding: 8px 24px;
     background-color: var(--gray-100);
     box-shadow: 0 1px 0 transparentize($grey700, 0.8);
@@ -68,7 +68,7 @@
 
   .lp-draghandle {
     position: absolute;
-    z-index: 6;
+    z-index: 101;
     top: 0;
     @include right(-2px);
     width: 4px;

src/web/assets/cp/src/js/LivePreview.js

@@ -504,6 +504,14 @@ Craft.LivePreview = Garnish.Base.extend(
       previewAction: null,
       previewParams: {},
     },
+
+    getActive: function () {
+      for (let preview of Craft.LivePreview.instances) {
+        if (preview.inPreviewMode) {
+          return preview;
+        }
+      }
+    },
   }
 );
 

src/web/assets/cp/src/js/Preview.js

@@ -961,12 +961,20 @@ Craft.Preview = Garnish.Base.extend(
     instances: [],
 
     refresh: function () {
-      for (preview of Craft.Preview.instances) {
+      for (let preview of Craft.Preview.instances) {
         preview.updateIframe();
       }
-      for (preview of Craft.LivePreview.instances) {
+      for (let preview of Craft.LivePreview.instances) {
         preview.forceUpdateIframe();
       }
     },
+
+    getActive: function () {
+      for (let preview of Craft.Preview.instances) {
+        if (preview.isActive) {
+          return preview;
+        }
+      }
+    },
   }
 );

src/web/assets/cp/src/js/Slideout.js

@@ -10,23 +10,11 @@
       $container: null,
       $shade: null,
       isOpen: false,
+      useMobileStyles: null,
 
       init: function (contents, settings) {
         this.setSettings(settings, Craft.Slideout.defaults);
 
-        if (!Craft.useMobileStyles()) {
-          this.$shade = $('<div class="slideout-shade"/>').appendTo(
-            Garnish.$bod
-          );
-
-          if (this.settings.closeOnShadeClick) {
-            this.addListener(this.$shade, 'click', (ev) => {
-              ev.stopPropagation();
-              this.close();
-            });
-          }
-        }
-
         this.$outerContainer = $('<div/>', {
           class: 'slideout-container hidden',
         });
@@ -42,10 +30,6 @@
 
         Garnish.addModalAttributes(this.$outerContainer);
 
-        if (Craft.useMobileStyles()) {
-          this.$container.addClass('so-mobile');
-        }
-
         Craft.trapFocusWithin(this.$container);
 
         if (this.settings.autoOpen) {
@@ -62,17 +46,58 @@
 
         this._cancelTransitionListeners();
 
-        // Move the shade + container to the end of <body> so they get the highest sub-z-indexes
-        if (this.$shade) {
-          this.$shade.appendTo(Garnish.$bod).show();
+        const activePreview =
+          Craft.Preview.getActive() || Craft.LivePreview.getActive();
+        this.useMobileStyles = activePreview || Craft.useMobileStyles();
+
+        this.$outerContainer.removeClass('so-mobile so-lp');
+        this.$container.removeClass('so-mobile so-lp');
+
+        if (activePreview) {
+          this.$outerContainer.addClass('so-lp');
+          this.$container.addClass('so-lp');
+        } else if (this.useMobileStyles) {
+          this.$container.addClass('so-mobile');
+        }
+
+        if (activePreview || !this.useMobileStyles) {
+          if (!this.$shade) {
+            this.$shade = $('<div class="slideout-shade"/>');
+
+            if (this.settings.closeOnShadeClick) {
+              this.addListener(this.$shade, 'click', (ev) => {
+                ev.stopPropagation();
+                this.close();
+              });
+            }
+          }
+
+          // Keep the shade + container to the end of <body> so they get the highest sub-z-indexes
+          if (activePreview) {
+            this.$shade.appendTo(activePreview.$editorContainer);
+          } else {
+            this.$shade.appendTo(Garnish.$bod);
+          }
+
+          this.$shade.show();
+        }
+
+        if (activePreview) {
+          this.$outerContainer.appendTo(activePreview.$editorContainer);
+        } else {
+          this.$outerContainer.appendTo(Garnish.$bod);
         }
 
-        this.$outerContainer.appendTo(Garnish.$bod).removeClass('hidden');
+        this.$outerContainer.removeClass('hidden');
 
-        if (Craft.useMobileStyles()) {
-          this.$container.css('top', '100vh');
+        if (this.useMobileStyles) {
+          this.$container
+            .css('top', '100vh')
+            .css(Garnish.ltr ? 'left' : 'right', '');
         } else {
-          this.$container.css(Garnish.ltr ? 'left' : 'right', '100vw');
+          this.$container
+            .css('top', '')
+            .css(Garnish.ltr ? 'left' : 'right', '100vw');
         }
 
         this.$container.one('transitionend.slideout', () => {
@@ -173,7 +198,7 @@
       openPanels: [],
       addPanel: function (panel) {
         Craft.Slideout.openPanels.unshift(panel);
-        if (Craft.useMobileStyles()) {
+        if (panel.useMobileStyles) {
           panel.$container.css('top', 0);
         } else {
           Craft.Slideout.updateStyles();
@@ -183,7 +208,7 @@
         Craft.Slideout.openPanels = Craft.Slideout.openPanels.filter(
           (m) => m !== panel
         );
-        if (Craft.useMobileStyles()) {
+        if (panel.useMobileStyles) {
           panel.$container.css('top', '100vh');
         } else {
           panel.$container.css(Garnish.ltr ? 'left' : 'right', '100vw');