🐛 Fixed Preview button being unavailable on mobile in the editor (#28601)

no ref

Made it so mobile users could access the preview button which was unavailable on small width viewports.

Author: 9larsons

ghost/admin/app/components/editor/modals/preview.hbs

@@ -13,7 +13,7 @@
                 {{/if}}
             </div>
             <div class="gh-contentfilter-divider"></div>
-            <div class="gh-contentfilter gh-btn-group">
+            <div class="gh-contentfilter gh-btn-group gh-post-preview-sizes">
                 <button type="button" class="gh-btn {{if (eq this.previewSize "desktop") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changePreviewSize "desktop")}}><span>{{svg-jar "laptop"}}</span></button>
                 <button type="button" class="gh-btn {{if (eq this.previewSize "mobile") "gh-btn-group-selected"}} gh-post-preview-mode" {{on "click" (fn this.changePreviewSize "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>
             </div>
@@ -70,7 +70,7 @@
             <div class="gh-contentfilter-divider"></div>
             <button
                 type="button"
-                class="gh-btn gh-btn-editor gh-editor-preview-trigger active"
+                class="gh-btn gh-btn-editor gh-editor-preview-trigger gh-post-preview-close active"
                 {{on "click" @close}}
             >
                 <span>Close</span>

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

@@ -421,6 +421,11 @@
         gap: 1.6rem;
     }
 
+    .gh-editor-mobile-menu .gh-editor-preview-trigger {
+        display: inline-flex;
+        align-items: center;
+    }
+
     .gh-editor-mobile-menu .gh-btn-editor:hover {
         background: none !important;
     }

ghost/admin/app/styles/layouts/post-preview.css

@@ -60,6 +60,50 @@
     }
 }
 
+/* The Close button shares .gh-editor-preview-trigger, which is hidden below 500px
+   for the editor toolbar; the modal needs it visible so the preview can be dismissed */
+.gh-post-preview-header .gh-editor-preview-trigger {
+    display: inline-flex;
+    align-items: center;
+}
+
+@media (max-width: 640px) {
+    /* lay the header out in flow so the centered controls can't slide under the
+       absolutely-positioned action group and overlap it */
+    .gh-post-preview-header {
+        justify-content: flex-start;
+        padding: 1.2rem;
+    }
+
+    /* the "Preview" title is redundant inside the preview modal; drop it on phones
+       so the Close/share/Publish controls fit without crowding */
+    .gh-post-preview-header .left {
+        display: none;
+    }
+
+    .gh-post-preview-btn-group {
+        margin-left: 0;
+    }
+
+    .gh-post-preview-header .right {
+        position: static;
+        margin-left: auto;
+    }
+
+    /* push Close to the far-right corner so it isn't stranded mid-header; share
+       still sits directly left of Publish */
+    .gh-post-preview-close {
+        order: 1;
+    }
+
+    /* the desktop/mobile size toggle is meaningless on a phone */
+    .gh-post-preview-sizes,
+    .gh-post-preview-btn-group .gh-contentfilter-divider,
+    .gh-post-preview-header .right .gh-contentfilter-divider {
+        display: none;
+    }
+}
+
 .gh-post-preview-btn-group .gh-btn-group {
     gap: .2rem;
     margin: 0 4px;