From 8e9fc8a8e75f8cb64ea0626ace64a6cc1b4b9b8f Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 28 Jan 2019 15:29:36 -0600
Subject: [PATCH] Make existing fields full width

---
 res/css/structures/auth/_Login.scss        | 45 ++++------------------
 src/components/views/auth/PasswordLogin.js |  3 --
 2 files changed, 7 insertions(+), 41 deletions(-)

diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
index 477fd170b4..5ba4a38c95 100644
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@@ -23,7 +23,8 @@ limitations under the License.
 }
 
 .mx_Login_field {
-    width: 280px;
+    width: 100%;
+    box-sizing: border-box;
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;
@@ -123,9 +124,9 @@ limitations under the License.
 }
 
 .mx_Login_field_prefix {
-    height: 34px;
+    height: 38px;
     padding: 0px 5px;
-    line-height: 33px;
+    line-height: 38px;
 
     background-color: #eee;
     border: 1px solid #c7c7c7;
@@ -135,40 +136,11 @@ limitations under the License.
     text-align: center;
 }
 
-.mx_Login_field_suffix {
-    height: 34px;
-    padding: 0px 5px;
-    line-height: 33px;
-
-    background-color: #eee;
-    border: 1px solid #c7c7c7;
-    border-left: 0px;
-    border-radius: 0px 3px 3px 0px;
-
-    text-align: center;
-    flex-grow: 1;
-}
-
-.mx_Login_username {
-    height: 16px;
-    flex-shrink: 1;
-    min-width: 0px;
-}
-
-.mx_Login_phoneNumberField {
-    height: 16px;
-}
-
 .mx_Login_field_has_prefix {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
 }
 
-.mx_Login_field_has_suffix {
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-
 .mx_Login_phoneSection {
     display:flex;
 }
@@ -189,12 +161,9 @@ limitations under the License.
 }
 
 .mx_Login_phoneCountry .mx_Dropdown_option {
-    /*
-        To match height of mx_Login_field
-        33px + 2px border from mx_Dropdown_option = 35px
-    */
-    height: 33px;
-    line-height: 33px;
+    /* To match height of mx_Login_field */
+    height: 38px;
+    line-height: 38px;
 }
 
 .mx_Login_phoneCountry .mx_Dropdown_option img {
diff --git a/src/components/views/auth/PasswordLogin.js b/src/components/views/auth/PasswordLogin.js
index 5bf40ea098..6e35b99fdd 100644
--- a/src/components/views/auth/PasswordLogin.js
+++ b/src/components/views/auth/PasswordLogin.js
@@ -165,7 +165,6 @@ class PasswordLogin extends React.Component {
 
         switch (loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
-                classes.mx_Login_email = true;
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
                     className="mx_Login_field"
@@ -180,7 +179,6 @@ class PasswordLogin extends React.Component {
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
-                classes.mx_Login_username = true;
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
                     className={classNames(classes)}
@@ -199,7 +197,6 @@ class PasswordLogin extends React.Component {
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
-                classes.mx_Login_phoneNumberField = true;
                 classes.mx_Login_field_has_prefix = true;
                 classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
                 return <div className="mx_Login_phoneSection">