fix username/email setting input width

website/client/src/pages/settings/components/saveCancelButtons.vue

@@ -33,6 +33,7 @@ export default {
   align-items: center;
   display: flex;
   flex-direction: column;
+  margin-top: 1.5rem;
 }
 
 .btn-save {

website/client/src/pages/settings/settingRows/userEmailSetting.vue

@@ -36,24 +36,26 @@
           {{ $t("changeEmailDisclaimer") }}
         </div>
 
-        <validated-text-input
-          v-model="updates.newEmail"
-          settings-label="email"
-          :is-valid="validEmail"
-          @update:value="modalValuesChanged"
-          @blur="restoreEmptyEmail()"
-        />
+        <div class="input-area">
+          <validated-text-input
+            v-model="updates.newEmail"
+            settings-label="email"
+            :is-valid="validEmail"
+            @update:value="modalValuesChanged"
+            @blur="restoreEmptyEmail()"
+          />
 
-        <current-password-input
-          :show-forget-password="true"
-          @passwordValue="updates.password = $event"
-        />
+          <current-password-input
+            :show-forget-password="true"
+            @passwordValue="updates.password = $event"
+          />
 
-        <save-cancel-buttons
-          :disable-save="allowedToSave"
-          @saveClicked="changeEmail()"
-          @cancelClicked="requestCloseModal()"
-        />
+          <save-cancel-buttons
+            :disable-save="allowedToSave"
+            @saveClicked="changeEmail()"
+            @cancelClicked="requestCloseModal()"
+          />
+        </div>
       </td>
     </tr>
   </fragment>

website/client/src/pages/settings/settingRows/userNameSetting.vue

@@ -36,20 +36,22 @@
           {{ $t("changeUsernameDisclaimer") }}
         </div>
 
-        <validated-text-input
-          v-model="inputValue"
-          settings-label="username"
-          :is-valid="usernameValid"
-          :invalid-issues="usernameIssues"
-          @update:value="valuesChanged()"
-          @blur="restoreEmptyUsername()"
-        />
+        <div class="input-area">
+          <validated-text-input
+            v-model="inputValue"
+            settings-label="username"
+            :is-valid="usernameValid"
+            :invalid-issues="usernameIssues"
+            @update:value="valuesChanged()"
+            @blur="restoreEmptyUsername()"
+          />
 
-        <save-cancel-buttons
-          :disable-save="usernameCannotSubmit"
-          @saveClicked="changeUser('username', cleanedInputValue)"
-          @cancelClicked="requestCloseModal()"
-        />
+          <save-cancel-buttons
+            :disable-save="usernameCannotSubmit"
+            @saveClicked="changeUser('username', cleanedInputValue)"
+            @cancelClicked="requestCloseModal()"
+          />
+        </div>
       </td>
     </tr>
   </fragment>