From 1e4824f056ca78c949757574fc6ceb1106ab52c5 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Wed, 29 Jan 2014 14:28:03 +0000
Subject: [PATCH] Work around the Firefox 29 password flow under the show/hide
 button problem.

* Set a background color on the show/hide button and position the button just right to cover up the password field.

see https://bugzilla.mozilla.org/show_bug.cgi?id=965237

fixes #349
---
 app/styles/main.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/styles/main.css b/app/styles/main.css
index 7f43287fa..14b73f549 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -268,20 +268,30 @@ ul.links li {
  * The password class is used instead of type because the field's type can
  * change from password to text.
  */
-.password-row .password {
+.password-row input[type='password'] {
   padding-right: 75px;
 }
 
+/**
+ * The addition of right, top, border-radius, and background-color are
+ * all to fix a bug in firefox 29 where the right padding of the password
+ * field is ignored and password text flows under the show/hide button. When
+ * Firefox is fixed, top and right can be set to 0, height set to 44px,
+ * border-radius and background-color removed.
+ *
+ * See https://bugzilla.mozilla.org/show_bug.cgi?id=965237
+ */
 .password-row .show-password-label {
   border-left: 1px solid #C0C9D0;
+  border-radius: 0 5px 5px 0;
   color: #C0C9D0;
   cursor: pointer;
   font-size: 16px;
-  height: 44px;
+  height: 43px;
   line-height: 44px;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 1px;
+  top: 1px;
   /* it is very easy to accidentally select the text when clicking */
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -290,6 +300,7 @@ ul.links li {
       -ms-user-select: none;
           user-select: none;
   width: 55px;
+  background-color: #fff;
 }
 
 .password-row .password:focus + .show-password-label {