From aee7430263821657ceeae15920c9f977a75a4726 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Fri, 18 Oct 2019 11:44:45 +0200
Subject: [PATCH] Fixed Stripe info box responsive behavior

no issue
---
 ghost/admin/app/styles/layouts/labs.css       | 43 +++++++++++++++++++
 .../components/gh-members-lab-setting.hbs     | 14 +++---
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/labs.css b/ghost/admin/app/styles/layouts/labs.css
index 10ce518bc8..9ef0138e4e 100644
--- a/ghost/admin/app/styles/layouts/labs.css
+++ b/ghost/admin/app/styles/layouts/labs.css
@@ -52,6 +52,26 @@
     opacity: 0.25;
 }
 
+.gh-members-stripe-info-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.gh-members-stripe-info-header h4 {
+    font-weight: 600;
+    margin: 0;
+    padding: 0;
+}
+
+.gh-members-stripe-info {
+    border-radius: 0.9rem;
+    border: 1px solid var(--whitegrey);
+    background: var(--whitegrey-l2);
+    padding: 12px;
+    width: 380px;
+}
+
 .gh-members-stripe-badge {
     width: 180px;
 }
@@ -60,6 +80,29 @@
     color: #555ABF;
 }
 
+@media (max-width: 500px) {
+    .gh-members-stripe-info-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .gh-members-stripe-info-header h4 {
+        order: 2;
+        margin-top: 10px;
+        padding-top: 10px;
+        border-top: 1px solid var(--whitegrey);
+    }
+
+    .gh-members-stripe-badge {
+        order: 1;
+        /* margin: -10px 0 0 -10px; */
+    }
+
+    .gh-members-stripe-info {
+        width: 100%;
+    }
+}
+
 .gh-labs-disabled .for-checkbox label,
 .gh-labs-disabled .for-checkbox .input-toggle-component,
 .gh-labs-disabled .for-switch label,
diff --git a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
index 4f15a25556..fe19df7aa6 100644
--- a/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
+++ b/ghost/admin/app/templates/components/gh-members-lab-setting.hbs
@@ -12,8 +12,8 @@
         </div>
 
         {{#liquid-if membersStripeOpen}}
-            <div class="flex flex-column flex-row-ns items-start justify-between mb4 mt6">
-                <div class="w-100 w-50-ns">
+            <div class="flex flex-column flex-row-l items-start justify-between mb4 mt6">
+                <div class="w-100 w-50-l">
                     <div class="mb4">
                         <label class="fw6 f8">Stripe Publishable key</label>
                         {{gh-text-input
@@ -23,7 +23,7 @@
                             class="mt1 password"
                         }}
                     </div>
-                    <div>
+                    <div class="nudge-top--3">
                         <label class="fw6 f8 mt4">Stripe Secret key</label>
                         {{gh-text-input
                             type="password"
@@ -36,10 +36,10 @@
                         </a>
                     </div>
                 </div>
-                <div class="w-100 w-50-m w-third-l ml5 mt6">
-                    <div class="br4 ba b--whitegrey bg-whitegrey-l2 pa4">
-                        <div class="flex items-center justify-between">
-                            <h4 class="f6 ma0 pa0">How you get paid</h4>
+                <div class="ml0 ml5-l mt6">
+                    <div class="gh-members-stripe-info">
+                        <div class="gh-members-stripe-info-header">
+                            <h4>How you get paid</h4>
                             {{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
                         </div>
                         <p class="f8 mt2 mb0">