From f09af344ed577dba644932b7251ebf903eb2feee Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 1 Jul 2021 09:30:16 +0100
Subject: [PATCH] Switched PSM to popover on smaller screens

refs https://github.com/TryGhost/Team/issues/840

- first pass at CSS-only PSM popover behaviour on screens <1024px
---
 .../admin/app/styles/components/settings-menu.css | 15 ++++++++++++++-
 ghost/admin/app/styles/layouts/editor.css         |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/styles/components/settings-menu.css b/ghost/admin/app/styles/components/settings-menu.css
index d5e3ce8eb1..004e8b16e0 100644
--- a/ghost/admin/app/styles/components/settings-menu.css
+++ b/ghost/admin/app/styles/components/settings-menu.css
@@ -394,6 +394,19 @@
     min-width: 501px;
 }
 
+@media (max-width: 1024px) {
+    .settings-menu-container-labs {
+        position: absolute;
+        right: 0;
+    }
+}
+
+@media (max-width: 800px) {
+    .settings-menu-container-labs {
+        padding-bottom: 64px;
+    }
+}
+
 .settings-menu-toggle-labs {
     position: absolute;
     top: 31px;
@@ -473,4 +486,4 @@
 
 .gh-publishmenu-labs {
     margin-right: 8px;
-}
\ No newline at end of file
+}
diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css
index 940b4bae63..b218f5bc98 100644
--- a/ghost/admin/app/styles/layouts/editor.css
+++ b/ghost/admin/app/styles/layouts/editor.css
@@ -297,6 +297,12 @@
     max-width: calc(100vw - var(--editor-sidebar-width))
 }
 
+@media (max-width: 1024px) {
+    .gh-editor {
+        max-width: 100%;
+    }
+}
+
 .gh-editor-header {
     position: absolute;
     top: 0;