Change out caption for email invite suggestions and stack vertically

Author: t3chguy

res/css/views/dialogs/_InviteDialog.scss

@@ -37,7 +37,7 @@ limitations under the License.
         }
 
         // Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles
-        input, input:focus {
+        > input[type="text"] {
             margin: 6px 0 !important;
             height: 24px;
             line-height: $font-24px;
@@ -140,6 +140,10 @@ limitations under the License.
         }
     }
 
+    .mx_InviteDialog_roomTile_nameStack {
+        display: inline-block;
+    }
+
     .mx_InviteDialog_roomTile_name {
         font-weight: 600;
         font-size: $font-14px;

src/components/views/dialogs/InviteDialog.js

@@ -280,11 +280,17 @@ class DMRoomTile extends React.PureComponent {
             </span>
         );
 
+        const caption = this.props.member.isEmail
+            ? _t("Invite by email")
+            : this._highlightName(this.props.member.userId);
+
         return (
             <div className='mx_InviteDialog_roomTile' onClick={this._onClick}>
                 {stackedAvatar}
-                <span className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</span>
-                <span className='mx_InviteDialog_roomTile_userId'>{this._highlightName(this.props.member.userId)}</span>
+                <span className="mx_InviteDialog_roomTile_nameStack">
+                    <div className='mx_InviteDialog_roomTile_name'>{this._highlightName(this.props.member.name)}</div>
+                    <div className='mx_InviteDialog_roomTile_userId'>{caption}</div>
+                </span>
                 {timestamp}
             </div>
         );