Style password change interaction

ui/src/admin/components/ChangePassRow.js

@@ -52,22 +52,22 @@ class ChangePassRow extends Component {
 
     if (this.state.showForm) {
       return (
-        <div>
-        <input
-          className="form-control"
-          name="password"
-          type="password"
-          value={user.password || ''}
-          placeholder="Password"
-          onChange={this.handleEdit(user)}
-          onKeyPress={this.handleKeyPress(user)}
-          autoFocus={true}
-        />
-        <ConfirmButtons
-          onConfirm={this.handleSubmit}
-          item={user}
-          onCancel={this.handleCancel}
-        />
+        <div className="admin-change-pw">
+          <input
+            className="form-control"
+            name="password"
+            type="password"
+            value={user.password || ''}
+            placeholder="Password"
+            onChange={this.handleEdit(user)}
+            onKeyPress={this.handleKeyPress(user)}
+            autoFocus={true}
+          />
+          <ConfirmButtons
+            onConfirm={this.handleSubmit}
+            item={user}
+            onCancel={this.handleCancel}
+          />
         </div>
       )
     }

ui/src/admin/components/UsersTable.js

@@ -30,6 +30,7 @@ const UsersTable = ({
             {hasRoles && <th>Roles</th>}
             <th>Permissions</th>
             <th></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>

ui/src/style/pages/admin.scss

@@ -190,10 +190,26 @@
 }
 .db-manager:first-child {
   margin-top: 0;
- }
+}
 
 .db-manager-table {
   background-color: $g4-onyx;
   padding: 9px 11px;
   border-radius: $radius-small;
- }
+}
+
+
+.admin-change-pw {
+  float: right;
+  display: flex !important;
+  flex-wrap: nowrap;
+
+  .form-control {
+    height: 22px;
+    padding: 0 6px;
+    margin: 0 4px 0 0;
+    min-width: 110px;
+    font-size: 12px;
+    width: 120px;
+  }
+}