adjust styling of generate secure password button

Author: njaeggi

Diff for: frontend/app/templates/components/encryptable/form.hbs

@@ -72,22 +72,25 @@
                 </form.element>
                 <PasswordStrengthMeter class="col-12 px-0 mb-2 mb-md-0" @password={{this.changeset.cleartextPassword}}/>
                 <div class="d-flex flex-column border border-mute border-radius-4 p-2">
-                  <label>
-                    Symbols
-                    <Input
-                      id="withSymbols"
-                      @type="checkbox"
-                      @checked={{this.withSymbols}}></Input>
-                  </label>
+                  <div class="ml-2 mt-1">{{t "encryptable/credentials.form.passwordLength"}} </div>
                   <label for="formControlRange">
                     {{this.passwordLength}}
                     <Input @type="range" class="custom-range" id="formControlRange" @value={{this.passwordLength}} min="14" max="32">
                     </Input>
                   </label>
-                  <button id="password-generate-button" class="btn btn-secondary btn-block col-lg-7 mb-md-4" {{on "click" this.setRandomPassword}}
-                          tabindex="4">
-                    {{t "encryptable/credentials.edit.random_password"}}
-                  </button>
+                  <div class="d-flex flex-row justify-content-around">
+                    <label>
+                      Symbols
+                      <Input
+                        id="withSymbols"
+                        @type="checkbox"
+                        @checked={{this.withSymbols}}></Input>
+                    </label>
+                    <button id="password-generate-button" class="btn btn-secondary w-50 btn-sm col-lg-7 mb-md-4" {{on "click" this.setRandomPassword}}
+                            tabindex="4">
+                      {{t "encryptable/credentials.edit.random_password"}}
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>

Diff for: frontend/translations/ch_be.yml

@@ -90,6 +90,8 @@ ch_be:
       blank: Läär
     new:
       title: Nöi Zuägangsdate
+    form:
+      passwordLength: "Password Längi: "
 
   admin:
     title: Admin

Diff for: frontend/translations/de.yml

@@ -90,6 +90,8 @@ de:
       blank: Leer
     new:
       title: Neue Zugangsdaten
+    form:
+      passwordLength: "Passwortlänge: "
 
   admin:
     title: Admin

Diff for: frontend/translations/en.yml

@@ -90,6 +90,8 @@ en:
       blank: none
     new:
       title: New Credentials
+    form:
+      passwordLength: "Password Length: "
 
   admin:
     title: Admin

Diff for: frontend/translations/fr.yml

@@ -90,6 +90,8 @@ fr:
       blank: Vide
     new:
       title: Nouveau compte
+    form:
+      passwordLength: "Longueur du mot de passe: "
 
   admin:
     title: Admin