From b53ccace9593e32ecd3ed5df28d81b3c899f31fc Mon Sep 17 00:00:00 2001
From: negue <eugen.bolz@gmail.com>
Date: Wed, 15 Mar 2023 23:43:06 +0100
Subject: [PATCH] fix username/email setting input width

---
 .../settings/components/saveCancelButtons.vue |  1 +
 .../settings/settingRows/userEmailSetting.vue | 34 ++++++++++---------
 .../settings/settingRows/userNameSetting.vue  | 28 ++++++++-------
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/website/client/src/pages/settings/components/saveCancelButtons.vue b/website/client/src/pages/settings/components/saveCancelButtons.vue
index 9819f58e47..8858196e77 100644
--- a/website/client/src/pages/settings/components/saveCancelButtons.vue
+++ b/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 {
diff --git a/website/client/src/pages/settings/settingRows/userEmailSetting.vue b/website/client/src/pages/settings/settingRows/userEmailSetting.vue
index a6e678a637..e849bbd302 100644
--- a/website/client/src/pages/settings/settingRows/userEmailSetting.vue
+++ b/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>
diff --git a/website/client/src/pages/settings/settingRows/userNameSetting.vue b/website/client/src/pages/settings/settingRows/userNameSetting.vue
index a6c9774195..a9930d2142 100644
--- a/website/client/src/pages/settings/settingRows/userNameSetting.vue
+++ b/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>