From ecbbeb561225efe67004e412dc3ba0c9a757215f Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 27 Jul 2016 20:15:53 -0400
Subject: [PATCH] Set common y-origin for validation bubbles

I believe this will keep the misalignment from happening across browsers. Sets the top left corner to the top left corner of the input block.

Resolves #770
---
 src/components/card/card.scss          | 15 ++++++---------
 src/components/registration/steps.scss | 10 +---------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 89e30d601..b8637421f 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -25,8 +25,9 @@
         $arrow-border-width: 1rem;
         display: block;
         position: absolute;
+        top: 0;
         left: 0;
-        transform: translate(20rem, -4rem);
+        transform: translate(16rem, 0);
         margin-left: $arrow-border-width;
         border: 1px solid $active-gray;
         border-radius: 5px;
@@ -58,15 +59,7 @@
         }
     }
 
-    .checkbox-row,
-    .textarea-row {
-        .validation-message {
-            transform: translate(20rem, 0);  
-        }
-    }
-
     .form {
-        position: relative;
         padding: 3rem 4rem;
 
         .card-button {
@@ -81,6 +74,10 @@
                     border: 1px solid $ui-orange;
                 }
             }
+
+            .col-sm-9 {
+                position: relative;
+            }
         }
     }
 }
diff --git a/src/components/registration/steps.scss b/src/components/registration/steps.scss
index f2da547db..6d763e156 100644
--- a/src/components/registration/steps.scss
+++ b/src/components/registration/steps.scss
@@ -80,7 +80,7 @@
     &.organization-step {
         .checkbox-group {
             .validation-message {
-                transform: translate(20rem, -16rem);
+                transform: translate(16rem, -16rem);
             }
         }
 
@@ -95,14 +95,6 @@
         }
     }
 
-    &.address-step {
-        .select {
-            .validation-message {
-                transform: translate(20rem, .5rem);
-            }
-        }
-    }
-
     &.usescratch-step {
         .form {
             .form-group {