Fix a wholelotta setup-screen bullshit

Merging setup screen into the new app wrapper had some knock-on effects due to new flexbox parent elements. As a result things were vertically collapsing in unexpected ways on narrow viewports. This is cleaned up here, with some other minor visual bugfixes.

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

@@ -5,10 +5,12 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
     min-height: 100vh;
 }
 
 .gh-flow-head {
+    flex-shrink: 0;
     display: flex;
     justify-content: space-between;
     padding-top: 4vh;
@@ -17,6 +19,7 @@
 
 .gh-flow-content-wrap {
     flex-grow: 1;
+    flex-shrink: 0;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -103,8 +106,9 @@
 }
 
 .gh-flow-nav .step i {
+    width: 26px;
+    height: 26px;
     font-size: 26px;
-    line-height: 22px;
 }
 
 .gh-flow-nav .active ~ li:not(divider) .step {
@@ -143,8 +147,9 @@
 }
 
 
-
 .gh-flow-content {
+    display: flex;
+    flex-direction: column;
     max-width: 700px;
     width: 100%;
     color: var(--midgrey);
@@ -187,20 +192,32 @@
     font-style: normal;
 }
 
-.gh-flow-content img {
-    max-width: 100%;
+.gh-flow-content .gh-flow-screenshot {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    height: 45vh;
 }
 
-.gh-flow-content .gh-flow-screenshot {
+.gh-flow-content .gh-flow-screenshot img {
     position: relative;
-    left: -38px;
+    left: -3%;
+    flex-shrink: 0;
+    display: block;
+    margin: 0 auto;
+    max-height: 100%;
 }
 
 @media (max-width: 860px) {
-    .gh-flow-content .gh-flow-screenshot {
+    .gh-flow-content .gh-flow-screenshot img {
         left: 0;
     }
 }
+@media (max-width: 600px) {
+    .gh-flow-content .gh-flow-screenshot {
+        height: auto;
+    }
+}
 
 .gh-flow-content .btn {
     display: block;
@@ -220,6 +237,7 @@
     margin: 70px auto 30px;
     padding: 50px 40px 25px;
     max-width: 400px;
+    width: 100%;
     border: #dae1e3 1px solid;
     background: #f8fbfd;
     border-radius: 5px;
@@ -353,6 +371,19 @@
     text-align: left;
 }
 
+.gh-flow-invite label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.gh-flow-invite label i {
+    width: 14px;
+    height: 14px;
+    font-size: 14px;
+    line-height: 1.4em;
+}
+
 @media (max-width: 460px) {
     .gh-flow-content .gh-flow-invite label i {
         display: none;
@@ -360,23 +391,16 @@
 }
 
 .gh-flow-content .gh-flow-faces {
-    margin-bottom: 3vw;
+    margin-bottom: 2vw;
 }
 
 .gh-flow-content textarea {
-    margin-bottom: 40px;
     width: 100%;
     height: 160px;
     font-size: 1.6rem;
     font-weight: 100;
 }
 
-@media (max-width: 1200px) {
-    .gh-flow-content textarea {
-        margin-bottom: 3vw;
-    }
-}
-
 .gh-flow-content .response {
     position: absolute;
     right: 0;

ghost/admin/app/templates/setup/one.hbs

@@ -4,7 +4,9 @@
         <p>So far there have been <em>{{model.count}}</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
     </header>
 
-    <img class="gh-flow-screenshot" src="{{gh-path 'admin' 'img/install-welcome.png'}}" alt="Ghost screenshot" />
+    <figure class="gh-flow-screenshot">
+        <img src="{{gh-path 'admin' 'img/install-welcome.png'}}" alt="Ghost screenshot" />
+    </figure>
 
     {{#link-to "setup.two" classNames="btn btn-green btn-lg"}}
         Create your account <i class="icon-chevron"></i>

ghost/admin/app/templates/setup/three.hbs

@@ -8,7 +8,7 @@
 
     <form class="gh-flow-invite">
         <label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
-        {{textarea name="users" placeholder="john@example.com
+        {{textarea class="gh-input" name="users" placeholder="john@example.com
 sally.sanders@example.com" value=users}}
     </form>