From 49422705a8c5714bd9df0cc8720ab885d996cdf5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 13:59:56 +0300
Subject: [PATCH 1/8] fixed interaction button size

---
 src/components/user_card/user_card.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 913589725..150a15d5b 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -415,7 +415,7 @@
     gap: 0.6em;
 
     > * {
-      flex: 0 0 10%;
+      flex: 0 0 8em;
     }
 
     .popover-trigger-button, .moderation-tools-button {

From a4e6a72ca2b099d2926996b98f8e6b6cbbec9547 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 14:10:07 +0300
Subject: [PATCH 2/8] fix banner overflowing

---
 src/components/user_card/user_card.scss      | 7 ++++---
 src/components/user_panel/user_panel.vue     | 2 ++
 src/components/user_popover/user_popover.vue | 7 +++++--
 src/components/user_profile/user_profile.vue | 4 ++++
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 150a15d5b..d15303fde 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,6 +1,7 @@
 .user-card {
   position: relative;
   z-index: 1;
+  overflow: hidden;
 
   // editing headers
   h4 {
@@ -161,9 +162,10 @@
 
 .user-info {
   position: relative;
-  margin: 0.6em;
-  margin-bottom: 0;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 
   .user-identity {
     position: relative;
@@ -171,7 +173,6 @@
     min-height: 6em;
     display: flex;
     align-items: flex-end;
-    margin-bottom: 1em;
     container: user-card / inline-size;
 
     > * {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 7ac4d429c..783770dda 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -29,6 +29,8 @@
   }
 
   .user-info {
+    margin: 0.6em;
+
     .Avatar {
       width: 5em;
       width: calc(min(5em, 20cqw));
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 9bff355e9..10850ef70 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -27,7 +27,11 @@
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
 .user-popover {
-  margin-bottom: 0.6em;
+  margin: 0;
+
+  .user-info {
+    margin: 1.2em;
+  }
 
   .user-identity {
     aspect-ratio: unset;
@@ -40,7 +44,6 @@
 
   &.popover {
     overflow: hidden;
-    padding: 0.6em;
   }
 }
 /* stylelint-enable block-no-empty */
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 749b828b8..03042f2ab 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -140,6 +140,10 @@
     align-items: center;
     padding: 2em;
   }
+
+  .user-info {
+    margin: 0.6em;
+  }
 }
 
 .user-profile-placeholder {

From 8268d0d349304ed09abc4e2c3b334c823fd6103c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 14:18:09 +0300
Subject: [PATCH 3/8] better headers

---
 src/components/user_card/user_card.scss | 12 +++++++++---
 src/components/user_card/user_card.vue  | 12 +++++++-----
 src/i18n/en.json                        |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index d15303fde..4b0536008 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -7,10 +7,16 @@
   h4 {
     line-height: 2;
     display: flex;
-    padding: 0 1.0em;
+  }
 
-    span {
-      flex: 1;
+  h3 {
+    padding-left: 0.6em;
+    margin-bottom: 0;
+
+    .button-default {
+      font-size: 1rem;
+      line-height: 2;
+      padding: 0 0.6em;
     }
   }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4fe2905ec..743cbef04 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -334,7 +334,7 @@
       </div>
     </div>
     <template v-if="editable">
-      <h4>{{ $t('settings.user_preferences') }}</h4>
+      <h3>{{ $t('settings.user_preferences') }}</h3>
       <p
         v-if="role === 'admin' || role === 'moderator'"
         class="user-card-setting"
@@ -413,10 +413,11 @@
         />
       </div>
     </div>
-    <h4 v-if="editable">
+    <h3 v-if="editable">
       <span>
         {{ $t('settings.bio') }}
       </span>
+      {{ ' ' }}
       <button
         class="button-default"
         @click="editingBio = !editingBio"
@@ -427,7 +428,7 @@
           icon="pencil"
         />
       </button>
-    </h4>
+    </h3>
     <template v-if="!editable || !editingBio">
       <RichContent
         v-if="!hideBio"
@@ -456,10 +457,11 @@
         </template>
       </EmojiInput>
     </template>
-    <h4 v-if="editable">
+    <h3 v-if="editable">
       <span>
         {{ $t('settings.profile_fields.label') }}
       </span>
+      {{ ' ' }}
       <button
         class="button-default"
         @click="editingFields = !editingFields"
@@ -470,7 +472,7 @@
           icon="pencil"
         />
       </button>
-    </h4>
+    </h3>
     <template v-if="!editable || !editingFields">
       <div
         v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f284cbedb..91f6cc868 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -396,7 +396,7 @@
     "save": "Save changes",
     "reset": "Reset changes",
     "security": "Security",
-    "toggle_edit": "Toggle edit",
+    "toggle_edit": "Edit",
     "change_banner": "Change banner",
     "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",

From 184f1cdc2432512b0a15aad6f845e04d2718f12e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 14:39:15 +0300
Subject: [PATCH 4/8] remove useless stuff

---
 src/components/user_card/user_card.scss      | 59 --------------------
 src/components/user_card/user_card.vue       |  5 +-
 src/components/user_profile/user_profile.vue |  3 +-
 3 files changed, 2 insertions(+), 65 deletions(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4b0536008..1d5017d61 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -75,17 +75,6 @@
     --_still-image-label-visibility: hidden;
   }
 
-  .panel-heading {
-    text-align: center;
-    box-shadow: none;
-    background: transparent;
-    backdrop-filter: none;
-    flex-direction: column;
-    align-items: stretch;
-    // create new stacking context
-    position: relative;
-  }
-
   .personal-marks {
     margin: 0.6em;
     padding: 0.6em;
@@ -369,52 +358,6 @@
     }
   }
 
-  .highlighter {
-    margin: 5em;
-    align-items: baseline;
-    line-height: 22px;
-    flex-wrap: wrap;
-
-    .following {
-      flex: 1 0 auto;
-      margin: 0;
-      margin-bottom: 0.25em;
-      text-align: left;
-    }
-
-    .highlighter {
-      flex: 0 1 auto;
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: -0.5em;
-      align-self: start;
-
-      .userHighlightCl {
-        padding: 2px 10px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightSel {
-        padding-top: 0;
-        padding-bottom: 0;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightText {
-        width: 70px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightCl,
-      .userHighlightText,
-      .userHighlightSel {
-        vertical-align: top;
-        margin-right: 0.5em;
-        margin-bottom: 0.25em;
-      }
-    }
-  }
-
   .user-interactions {
     position: relative;
     display: flex;
@@ -491,8 +434,6 @@
   img {
     object-fit: contain;
     vertical-align: middle;
-    max-width: 100%;
-    max-height: 400px;
   }
 
   .user-profile-field-add,
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 743cbef04..1e70ea4db 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -3,10 +3,7 @@
     class="user-card"
     :class="classes"
   >
-    <div
-      :class="onClose ? '' : 'panel-heading -flexible-height'"
-      class="user-card-inner"
-    >
+    <div class="user-card-inner">
       <div class="user-info">
         <div class="user-identity">
           <div
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 03042f2ab..e759c6752 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -129,7 +129,6 @@
 <style lang="scss">
 .user-profile {
   flex: 2;
-  flex-basis: 500px;
 
   // No sticky header on user profile
   --currentPanelStack: 0;
@@ -142,7 +141,7 @@
   }
 
   .user-info {
-    margin: 0.6em;
+    margin: 1.2em;
   }
 }
 

From 3311c676ad38f22a45b99a2a65f037c1fcafe268 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 14:43:37 +0300
Subject: [PATCH 5/8] better layout & wording

---
 .../settings_modal/tabs/profile_tab.scss      | 14 ++++
 .../settings_modal/tabs/profile_tab.vue       | 17 +++--
 src/components/user_card/user_card.scss       |  1 +
 src/components/user_card/user_card.vue        | 70 +++++++++----------
 src/i18n/en.json                              |  3 +-
 5 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 8f0f7862a..33a7c5ed0 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,4 +1,18 @@
 .profile-tab {
+  // overriding global for better look
+  div.profile-edit {
+    margin: 0;
+
+    h2 {
+      margin-left: 1rem;
+    }
+
+    .user-card {
+      padding: 1.2em;
+      overflow: hidden;
+    }
+  }
+
   .bio {
     margin: 0;
   }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 7be01d689..e3e5cc0a2 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,12 +1,15 @@
 <template>
   <div class="profile-tab">
-    <UserCard
-      :user-id="user.id"
-      :editable="true"
-      :switcher="false"
-      rounded="top"
-      >
-    </UserCard>
+    <div class="setting-item profile-edit">
+      <h2>{{ $t('settings.account_profile_edit') }}</h2>
+      <UserCard
+        :user-id="user.id"
+        :editable="true"
+        :switcher="false"
+        rounded="top"
+        >
+      </UserCard>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 1d5017d61..8b224efb6 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -426,6 +426,7 @@
 
 .user-profile-fields {
   margin: 0 0.5em;
+  padding: 0 0.5em;
   display: flex;
   flex-direction: column;
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 1e70ea4db..5bb21c838 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -330,41 +330,6 @@
         </div>
       </div>
     </div>
-    <template v-if="editable">
-      <h3>{{ $t('settings.user_preferences') }}</h3>
-      <p
-        v-if="role === 'admin' || role === 'moderator'"
-        class="user-card-setting"
-      >
-        <Checkbox v-model="newShowRole">
-          <template v-if="role === 'admin'">
-            {{ $t('settings.show_admin_badge') }}
-          </template>
-          <template v-if="role === 'moderator'">
-            {{ $t('settings.show_moderator_badge') }}
-          </template>
-        </Checkbox>
-      </p>
-      <p class="user-card-setting">
-        <label>
-          {{ $t('settings.actor_type') }}
-          <Select v-model="newActorType">
-            <option
-              v-for="option in availableActorTypes"
-              :key="option"
-              :value="option"
-            >
-              {{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
-            </option>
-          </Select>
-          <div v-if="groupActorAvailable">
-            <small>
-              {{ $t('settings.actor_type_description') }}
-            </small>
-          </div>
-        </label>
-      </p>
-    </template>
     <div
       v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
       class="personal-marks"
@@ -646,6 +611,41 @@
         </div>
       </template>
     </div>
+    <template v-if="editable">
+      <h3>{{ $t('settings.profile_other') }}</h3>
+      <p
+        v-if="role === 'admin' || role === 'moderator'"
+        class="user-card-setting"
+      >
+        <Checkbox v-model="newShowRole">
+          <template v-if="role === 'admin'">
+            {{ $t('settings.show_admin_badge') }}
+          </template>
+          <template v-if="role === 'moderator'">
+            {{ $t('settings.show_moderator_badge') }}
+          </template>
+        </Checkbox>
+      </p>
+      <p class="user-card-setting">
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="newActorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
+            </option>
+          </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
+        </label>
+      </p>
+    </template>
     <teleport to="#modal">
       <UserTimedFilterModal
         ref="timedMuteDialog"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 91f6cc868..c38d18c36 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -493,7 +493,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
-    "user_preferences": "Profile settings",
+    "profile_other": "Other",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",
@@ -664,6 +664,7 @@
       "label": "Birthday",
       "show_birthday": "Show my birthday"
     },
+    "account_profile_edit": "Edit Profile",
     "account_privacy": "Privacy",
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",

From bc2964c327cf584f8c9e15238dcf2dea7fa8aebd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 14:58:53 +0300
Subject: [PATCH 6/8] dirty state

---
 src/components/user_card/user_card.js   | 17 ++++++++
 src/components/user_card/user_card.scss |  5 +++
 src/components/user_card/user_card.vue  | 58 +++++++++++++------------
 3 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e80ee91de..e9c79aff1 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,4 +1,5 @@
 import merge from 'lodash/merge'
+import isEqual from 'lodash/isEqual'
 import unescape from 'lodash/unescape'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
@@ -116,6 +117,7 @@ export default {
       newShowRole: user.show_role,
 
       newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
+
       editingFields: false,
     }
   },
@@ -123,6 +125,21 @@ export default {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
+    somethingToSave () {
+      if (this.newName !== this.user.name_unescaped) return true
+      if (this.newBio !== unescape(this.user.description)) return true
+      if (this.newAvatar !== null) return true
+      if (this.newBanner !== null) return true
+      if (this.newActorType !== this.user.actor_type) return true
+      if (this.newBirthday !== this.user.birthday) return true
+      if (this.newShowBirthday !== this.user.show_birthday) return true
+      if (this.newShowRole !== this.user.show_role) return true
+      if (!isEqual(
+        this.newFields,
+        this.user.fields?.map(field => ({ name: field.name, value: field.value }))
+      )) return true
+      return false
+    },
     groupActorAvailable () {
       return this.$store.state.instance.groupActorAvailable
     },
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 8b224efb6..c948480ba 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -153,6 +153,11 @@
     border-style: solid;
     border-color: var(--border);
   }
+
+  .bottom-buttons {
+    display: flex;
+    gap: 0.5em;
+  }
 }
 
 .user-info {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5bb21c838..9873c0aea 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -293,34 +293,6 @@
               :user="user"
             />
           </template>
-          <button
-            v-if="editable"
-            :disabled="somethingToSave"
-            class="btn button-default reset-profile-button"
-            @click="resetState"
-          >
-            {{ $t('settings.reset') }}
-            <FAIcon
-              fixed-width
-              class="icon"
-              icon="clock-rotate-left"
-              :title="$t('user_card.edit_profile')"
-            />
-          </button>
-          <button
-            v-if="editable"
-            :disabled="somethingToSave"
-            class="btn button-default save-profile-button"
-            @click="updateProfile"
-          >
-            {{ $t('settings.save') }}
-            <FAIcon
-              fixed-width
-              class="icon"
-              icon="save"
-              :title="$t('user_card.edit_profile')"
-            />
-          </button>
         </div>
         <div
           v-if="!loggedIn && user.is_local"
@@ -645,6 +617,36 @@
           </div>
         </label>
       </p>
+      <div class="bottom-buttons">
+        <button
+          v-if="editable"
+          :disabled="!somethingToSave"
+          class="btn button-default reset-profile-button"
+          @click="resetState"
+        >
+          {{ $t('settings.reset') }}
+          <FAIcon
+            fixed-width
+            class="icon"
+            icon="clock-rotate-left"
+            :title="$t('user_card.edit_profile')"
+          />
+        </button>
+        <button
+          v-if="editable"
+          :disabled="!somethingToSave"
+          class="btn button-default save-profile-button"
+          @click="updateProfile"
+        >
+          {{ $t('settings.save') }}
+          <FAIcon
+            fixed-width
+            class="icon"
+            icon="save"
+            :title="$t('user_card.edit_profile')"
+          />
+        </button>
+      </div>
     </template>
     <teleport to="#modal">
       <UserTimedFilterModal

From 7e9fd4d1dd46f60472525b4ee6af8cfa1c5f9792 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 15:17:07 +0300
Subject: [PATCH 7/8] lint

---
 .../image_cropper/image_cropper.vue           |  2 +-
 .../settings_modal/tabs/profile_tab.vue       |  3 +--
 src/components/user_card/user_card.vue        | 21 +++++++++++--------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 9d8ecd173..ee487b09c 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -54,7 +54,7 @@
       type="file"
       class="input image-cropper-img-input"
       :accept="mimes"
-    />
+    >
   </div>
 </template>
 
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index e3e5cc0a2..6d458c7c8 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -7,8 +7,7 @@
         :editable="true"
         :switcher="false"
         rounded="top"
-        >
-      </UserCard>
+      />
     </div>
     <div class="setting-item">
       <h2>{{ $t('settings.account_privacy') }}</h2>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 9873c0aea..d913cf96e 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -153,8 +153,8 @@
                 <button
                   v-if="editable"
                   class="button-unstyled edit-button"
-                  @click="editingName = !editingName"
                   :title="$t('settings.toggle_edit')"
+                  @click="editingName = !editingName"
                 >
                   <FAIcon
                     class="icon"
@@ -500,7 +500,10 @@
           class="user-profile-field-add add-field button-default -hover-highlight"
           @click="addField"
         >
-          <FAIcon icon="plus" class="icon" />
+          <FAIcon
+            icon="plus"
+            class="icon"
+          />
           <span class="label">
             {{ $t("settings.profile_fields.add_field") }}
           </span>
@@ -508,8 +511,8 @@
       </div>
     </template>
     <div
-      class="user-extras"
       v-if="!hideBio"
+      class="user-extras"
     >
       <span
         v-if="!editable && !mergedConfig.hideUserStats"
@@ -675,12 +678,12 @@
           id="pick-image"
           class="button-default btn"
           type="button"
-          @click="() => this.$refs.cropper.pickImage()"
+          @click="() => $refs.cropper.pickImage()"
         >
           {{ $t('settings.upload_picture') }}
         </button>
         <p class="visibility-notice">
-          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' )}}
+          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
         </p>
         <template #footer>
           <button
@@ -688,26 +691,26 @@
             type="button"
             @click="editImage = false"
           >
-            {{ this.$t('image_cropper.cancel') }}
+            {{ $t('image_cropper.cancel') }}
           </button>
           <button
             :title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
             class="button-default btn reset-button"
             @click="resetImage"
           >
-            {{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' )}}
+            {{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' ) }}
           </button>
           <button
             class="button-default btn"
             type="button"
-            @click="this.$refs.cropper.submit(false)"
+            @click="$refs.cropper.submit(false)"
           >
             {{ $t('image_cropper.save_without_cropping') }}
           </button>
           <button
             class="button-default btn"
             type="button"
-            @click="this.$refs.cropper.submit(true)"
+            @click="$refs.cropper.submit(true)"
           >
             {{ $t('image_cropper.save') }}
           </button>

From fa67b2330f1754bf3590da905ae1fb27c4fac7e0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 15:20:19 +0300
Subject: [PATCH 8/8] fix

---
 src/components/emoji_input/emoji_input.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 057e6aa5c..a1cba33bc 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -115,7 +115,6 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  display: flex;
 
   .emoji-picker-icon {
     position: absolute;