Fixed responsive issues with new post settings menu

ghost/admin/app/components/gh-editor.js

@@ -7,6 +7,8 @@ import {debounce, run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
 
 export default Component.extend({
+    feature: service(),
+
     ui: service(),
 
     classNameBindings: [
@@ -84,6 +86,10 @@ export default Component.extend({
     },
 
     _setHeaderClass() {
+        if (this.feature.psmRedesign) {
+            return;
+        }
+        
         let editorTitle = this.element.querySelector('.gh-editor-title, .kg-title-input');
         let smallHeaderClass = 'gh-editor-header-small';
         let newHeaderClass = '';

ghost/admin/app/styles/app-dark.css

@@ -435,9 +435,19 @@ input:focus,
     color: var(--midgrey);
 }
 
+
+/* delete when psmRedesign flag is removed */
 .gh-editor-header-small {
     background: var(--dark-main-bg-color);
 }
+/* END delete */
+
+/* psmRedesign labs feature */
+@media (max-width: 1024px) {
+    .gh-editor-header.labs {
+        background-color: var(--dark-main-bg-color);
+    }
+}
 
 .gh-markdown-editor .CodeMirror-cursor {
     border-color: #fff;
@@ -710,7 +720,11 @@ input:focus,
 }
 
 .gh-editor-preview-trigger {
-    background: var(--dark-main-bg-color);
+    background: var(--dark-main-bg-color) !important;
+}
+
+.gh-editor-preview-trigger:hover {
+    background: var(--whitegrey) !important;
 }
 
 .gh-btn-editor {

ghost/admin/app/styles/components/settings-menu.css

@@ -398,6 +398,12 @@
     .settings-menu-container-labs {
         position: absolute;
         right: 0;
+        box-shadow:
+        -4.5px 0 3.6px rgba(0, 0, 0, 0.007),
+        -12.5px 0 10px rgba(0, 0, 0, 0.008),
+        -30.1px 0 24.1px rgba(0, 0, 0, 0.01),
+        -100px 0 80px rgba(0, 0, 0, 0.02)
+    ;
     }
 }
 
@@ -423,10 +429,28 @@
     stroke: var(--black);
 }
 
+@media (min-width: 500px) and (max-width: 1024px) {
+    .settings-menu-toggle-labs {
+        top: 12px;
+    }
+}
+
+@media (max-width: 500px) {
+    .settings-menu-toggle-labs {
+        top: 15px;
+    }
+}
+
 .settings-menu-toggle-spacer-labs {
     width: 40px;
 }
 
+@media (max-width: 1024px) {
+    .settings-menu-toggle-spacer-labs {
+        width: 68px;
+    }
+}
+
 .settings-menu-container-labs .settings-menu-pane {
     position: absolute;
     top: 0;
@@ -449,6 +473,7 @@
     top: auto;
     right: auto;
     bottom: auto;
+    height: 100vh;
 }
 
 .settings-menu-header.labs {
@@ -460,10 +485,28 @@
     background: var(--white);
 }
 
+@media (min-width: 500px) and (max-width: 1024px) {
+    .settings-menu-header.labs {
+        padding-top: 17px; 
+    }
+}
+
+@media (max-width: 500px) {
+    .settings-menu-header.labs {
+        padding-top: 19px; 
+    }
+}
+
 .settings-menu-content.labs {
     padding: 92px 24px 33px;
 }
 
+@media (max-width: 1024px) {
+    .settings-menu-content.labs {
+        padding-top: 72px; 
+    }
+}
+
 .settings-menu-header.subview.labs {
     z-index: 2;
     width: 100%;
@@ -487,3 +530,15 @@
 .gh-publishmenu-labs {
     margin-right: 8px;
 }
+
+@media (max-width: 1024px) {
+    .gh-editor-header.labs {
+        z-index: 100;
+        height: 64px;
+        margin: 0;
+        padding: 0;
+        padding-left: 15px;
+        background-color: var(--white);
+        border-radius: 0;
+    }
+}

ghost/admin/app/styles/layouts/editor.css

@@ -344,6 +344,7 @@
     background: transparent;
 }
 
+/* delete when psmRedesign flag is removed */
 @media (max-width: 750px) {
     .gh-editor-header {
         padding: 0 4vw;
@@ -376,6 +377,7 @@
     margin: 0 auto;
     padding: 0 8px;
 }
+/* END delete when psmRedesign flag is removed */
 
 .gh-editor-status {
     color: var(--midgrey);
@@ -408,6 +410,12 @@
     padding-bottom: 3.6rem;
 }
 
+@media (max-width: 1400px) {
+    .gh-editor-feature-image-container {
+        margin: 0 auto;
+    }
+}
+
 .gh-editor-feature-image-container .gh-progress-container-progress {
     width: 100%;
 }
@@ -598,6 +606,12 @@
     background: var(--whitegrey);
 }
 
+@media (max-width: 500px) {
+    .gh-editor-preview-trigger {
+        display: none;
+    }
+}
+
 .gh-editor-wordcount {
     position: fixed;
     bottom: 0;

ghost/admin/app/templates/editor.hbs

@@ -5,7 +5,7 @@
             @class="gh-editor gh-view relative"
             as |editor|
         >
-            <header class="gh-editor-header br2 pe-none {{editor.headerClass}}">
+            <header class="gh-editor-header br2 pe-none {{editor.headerClass}} {{if (feature "psmRedesign") "labs"}}">
                 <div class="flex items-center pe-auto">
                     {{#if this.ui.isFullScreen}}
                         <div class="ml3 flex items-center">