tweaked input styles

app/base.css

@@ -84,6 +84,7 @@ a {
 }
 
 .input {
+  flex: 2 0 auto;
   border: 1px solid var(--primaryControlBGColor);
   border-radius: 6px 0 0 6px;
   font-size: 20px;
@@ -102,6 +103,7 @@ a {
 }
 
 .inputBtn {
+  flex: auto;
   background: var(--primaryControlBGColor);
   border-radius: 0 6px 6px 0;
   border: 1px solid var(--primaryControlBGColor);

app/templates/downloadPassword/downloadPassword.css

@@ -1,6 +1,7 @@
 .passwordSection {
   text-align: left;
-  padding: 40px;
+  padding: 40px 0;
+  width: 80%;
 }
 
 .passwordForm {
@@ -10,14 +11,6 @@
   padding: 10px 0;
 }
 
-.input--password {
-  flex: 1;
-}
-
-.inputBtn--password {
-  flex: 0 1 165px;
-}
-
 .red {
   color: red;
 }

app/templates/downloadPassword/index.js

@@ -17,7 +17,7 @@ module.exports = function(state, emit) {
       ${label}
       <form class="passwordForm" onsubmit=${checkPassword} data-no-csrf>
         <input id="password-input"
-          class="input input--password input--noBtn"
+          class="input input--noBtn"
           maxlength="64"
           autocomplete="off"
           placeholder="${state.translate('unlockInputPlaceholder')}"
@@ -25,7 +25,7 @@ module.exports = function(state, emit) {
           type="password" />
         <input type="submit"
           id="password-btn"
-          class="inputBtn inputBtn--password inputBtn--hidden"
+          class="inputBtn inputBtn--hidden"
           value="${state.translate('unlockButtonLabel')}"/>
       </form>
     </div>`;

app/templates/passwordInput/passwordInput.css

@@ -1,5 +1,4 @@
 .passwordInput {
-  align-self: left;
   display: flex;
   flex-wrap: nowrap;
   width: 80%;
@@ -25,7 +24,7 @@
   background-color: var(--successControlBGColor);
   border: 1px solid var(--successControlBGColor);
   color: var(--successControlFGColor);
-  width: 10em;
+  flex-basis: 20%;
 }
 
 .inputBtn--loading:hover {

app/templates/setPasswordSection/setPasswordSection.css

@@ -1,6 +1,5 @@
 .setPasswordSection {
   padding: 10px 0;
-  align-self: left;
   max-width: 100%;
   overflow-wrap: break-word;
 }