From 44c935847eac11449452a82bc7f21d2f1ade7ee0 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Mon, 8 Feb 2021 14:10:34 +0100
Subject: [PATCH] Fixed responsive issue for launch-site wizard

No ref

- Prevented preview from overlapping settings
- Avoided "Save and exit" button to left-align on smaller screens
---
 .../gh-launch-wizard/connect-stripe.hbs        |  5 ++---
 .../app/styles/layouts/fullscreen-wizard.css   | 18 ++++++++++++++++--
 ghost/admin/app/templates/launch.hbs           |  6 +++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/components/gh-launch-wizard/connect-stripe.hbs b/ghost/admin/app/components/gh-launch-wizard/connect-stripe.hbs
index 06d5c04203..843c254008 100644
--- a/ghost/admin/app/components/gh-launch-wizard/connect-stripe.hbs
+++ b/ghost/admin/app/components/gh-launch-wizard/connect-stripe.hbs
@@ -7,8 +7,7 @@
                     {{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
                 </div>
                 <div class="gh-setting-desc">
-                    Stripe is our exclusive direct payments partner.<br />
-                    Ghost collects <strong>no fees</strong> on any payments! If you don’t have a Stripe account yet, you can <a href="https://stripe.com" target="_blank" rel="noopener noreferrer" class="gh-members-stripe-link">sign up here</a>.
+                    Stripe is our exclusive direct payments partner. Ghost collects <strong>no fees</strong> on any payments! If you don’t have a Stripe account yet, you can <a href="https://stripe.com" target="_blank" rel="noopener noreferrer" class="gh-members-stripe-link">sign up here</a>.
                 </div>
             </div>
         </div>
@@ -71,7 +70,7 @@
                         <div class="flex items-center mb4 justify-between mt2">
                             <a href="{{this.stripeConnectAuthUrl}}" class="stripe-connect" target="_blank" rel="noopener noreferrer"><span>Connect with Stripe</span></a>
                             <div class="ml2 flex items-center flex-nowrap">
-                                <span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">{{if this.stripeConnectTestMode "Using" "Use"}} test mode</span>
+                                <span class="mr2 f8 midgrey nowrap {{if this.stripeConnectTestMode "gh-members-connect-testmodeon"}}">Test mode</span>
                                 <div class="for-switch small">
                                     <label class="switch" for="stripe-connect-test-mode" {{on "click" this.toggleStripeConnectTestMode}}>
                                         <input type="checkbox" class="gh-input" checked={{this.stripeConnectTestMode}} {{on "click" this.toggleStripeConnectTestMode}} data-test-checkbox="stripe-connect-test-mode">
diff --git a/ghost/admin/app/styles/layouts/fullscreen-wizard.css b/ghost/admin/app/styles/layouts/fullscreen-wizard.css
index 84a5aa0dbe..d9fe81fa8b 100644
--- a/ghost/admin/app/styles/layouts/fullscreen-wizard.css
+++ b/ghost/admin/app/styles/layouts/fullscreen-wizard.css
@@ -18,6 +18,22 @@
     text-transform: uppercase;
 }
 
+.gh-launch-wizard-content-left {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 25%;
+    min-width: 348px;
+    max-width: 400px;
+    margin: 40px 48px 0;
+}
+
+.gh-launch-wizard-content-right {
+    position: relative;
+    flex-grow: 1;
+    flex-basis: 100%;
+    margin: 40px 48px 56px 0;
+}
+
 .gh-launch-wizard-preview {
     box-shadow: 
         0 0 0 1px rgba(0,0,0,0.02),
@@ -34,8 +50,6 @@
     display: flex;
     flex-direction: column;
     height: calc(100vh - 136px);
-    min-width: 320px;
-    margin: 40px 48px 0 0;
 }
 
 .gh-launch-wizard-settings-container .gh-setting-action-largeimg-delete,
diff --git a/ghost/admin/app/templates/launch.hbs b/ghost/admin/app/templates/launch.hbs
index 3f4ce9cf3e..fc67d0e041 100644
--- a/ghost/admin/app/templates/launch.hbs
+++ b/ghost/admin/app/templates/launch.hbs
@@ -1,5 +1,5 @@
 <div class="fullscreen-wizard-container" {{will-destroy this.reset}}>
-    <div class="pt7 pb5 pl12 pr12 flex justify-between-l items-center bb b--whitegrey">
+    <div class="pt7 pb5 pl12 pr12 flex justify-between items-center bb b--whitegrey">
         <div class="flex flex-column">
             <div class="ttu gh-launch-wizard-step-indicator">{{this.currentStep.position}}</div>
             <h2>{{this.currentStep.title}}</h2>
@@ -10,7 +10,7 @@
     </div>
 
     <div class="flex br3 bg-white">
-        <div class="w-25 ml12">
+        <div class="gh-launch-wizard-content-left">
             {{component (concat "gh-launch-wizard/" this.step)
                 nextStep=this.goNextStep
                 backStep=this.goBackStep
@@ -20,7 +20,7 @@
             }}
         </div>
 
-        <div class="relative flex-grow-1 mt10 mr12 mb14">
+        <div class="gh-launch-wizard-content-right">
             <GhBrowserPreview class="gh-launch-wizard-preview-container" @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
                 <GhSiteIframe class="gh-launch-wizard-preview" @src={{this.previewSrc}} @guid={{this.previewGuid}}></GhSiteIframe>
             </GhBrowserPreview>