From b56769bbdeffdc85a1cbe778e76e1f0ea1ae847f Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Mon, 28 Sep 2015 01:52:55 -0700
Subject: [PATCH] fix(onboarding): Page content should remain centered when
 transitioning smaller

---
 .../onboarding/stylesheets/onboarding.less       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/internal_packages/onboarding/stylesheets/onboarding.less b/internal_packages/onboarding/stylesheets/onboarding.less
index b6906563e..7d2d131fa 100644
--- a/internal_packages/onboarding/stylesheets/onboarding.less
+++ b/internal_packages/onboarding/stylesheets/onboarding.less
@@ -95,8 +95,18 @@
     z-index: 10;
     position: absolute;
     top: 0;
-    left: 0;
-    width: 100%;
+
+    // Before you `git blame`, hear me out. We want the .page to be
+    // centered in the window, even if the window is transitioning to a smaller
+    // size to show a smaller page. transform:translateX(-50%) would be perfect,
+    // but can result in text aliasing, so we need margin:auto. But that won't
+    // work if the necessary margin is less than zero. So we pad the container
+    // out, such that the .page inside can be centered with positive margin.
+
+    // (Please don't break, it looks bad when our logo goes to the top left
+    // when the user chooses a sign-in method.)
+    left: -50%;
+    width: 200%;
   }
 
   .page {
@@ -142,7 +152,7 @@
 
   .back,
   .dismiss {
-    position: absolute;
+    position: fixed;
     top:25px;
     left:25px;
   }