style updates

src/App.scss

@@ -525,6 +525,10 @@ textarea {
     height: unset;
   }
 
+  &::placeholder {
+    color: var(--textFaint)
+  }
+
   --_padding: 0.5em;
 
   border: none;

src/components/account_actions/account_actions.vue

@@ -3,7 +3,6 @@
     <Popover
       trigger="click"
       placement="bottom"
-      :bound-to="{ x: 'container' }"
       remove-padding
     >
       <template #content>

src/components/user_card/user_card.scss

@@ -21,13 +21,15 @@
     align-items: stretch;
     // create new stacking context
     position: relative;
-    overflow: hidden;
   }
 
   .personal-marks {
     margin: 0.6em;
     padding: 0.6em;
+
+    &:not(:last-child) {
       border-bottom: 1px solid var(--border);
+    }
 
     .highlighter {
       h4 {
@@ -39,11 +41,9 @@
         margin-left: -0.1em;
 
         &.-none select {
-          font-style: italic;
           color: var(--textFaint);
 
           option {
-            font-style: initial;
             color: var(--text);
             background: var(--background);
           }
@@ -164,8 +164,8 @@
       --_avatarShadowFilter: var(--avatarShadowFilter);
       --_avatarShadowInset: var(--avatarShadowInset);
 
-      min-width: 6em;
+      width: 7em;
-      height: 6em;
+      height: 7em;
       object-fit: cover;
     }
   }

src/components/user_card/user_card.vue

@@ -83,6 +83,7 @@
           />
           <router-link
             v-else
+            class="user-info-avatar"
             :to="userProfileLink(user)"
           >
             <UserAvatar :user="user" />
@@ -312,9 +313,10 @@
           />
         </dd>
       </dl>
-      <div class="user-extras">
+    </div>
+    <div class="user-extras" v-if="!hideBio">
       <span
-          v-if="!hideBio && !mergedConfig.hideUserStats"
+        v-if="!mergedConfig.hideUserStats"
         class="user-stats"
       >
         <dl
@@ -359,7 +361,6 @@
         {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
       </div>
     </div>
-    </div>
     <teleport to="#modal">
       <UserTimedFilterModal
         :user="user"

src/components/user_note/user_note.js

@@ -11,14 +11,14 @@ const UserNote = {
   },
   data () {
     return {
-      localNote: '',
+      localNote: this.relationship.note,
       editing: false,
       frozen: false
     }
   },
-  computed: {
+  watch: {
-    shouldShow () {
+    relationship () {
-      return this.relationship.note || this.editing
+      this.localNote = this.relationship.note
     }
   },
   methods: {
@@ -39,6 +39,7 @@ const UserNote = {
         })
         .catch(() => {
           this.frozen = false
+          this.editing = false
         })
     }
   }

src/components/user_note/user_note.vue

@@ -5,19 +5,14 @@
   >
     <h4>{{ $t('user_card.personal_note') }}</h4>
     <textarea
-      v-show="editing"
       v-model="localNote"
       class="input note-text"
+      :class="{ unstyled: !editing }"
+      @focus="startEditing"
       @blur="finalizeEditing"
+      rows="1"
+      :placeholder="$t('user_card.note_blank_click')"
     />
-    <span
-      v-show="!editing"
-      class="note-text"
-      :class="{ '-blank': !relationship.note }"
-      @click="startEditing"
-    >
-      {{ relationship.note || $t('user_card.note_blank_click') }}
-    </span>
     <span
       class="overlay"
       v-if="frozen"
@@ -40,11 +35,8 @@
 
   .note-text {
     align-self: stretch;
-  }
+    min-width: 100%;
-
+    margin: -0.6em;
-  .note-text.-blank {
-    font-style: italic;
-    color: var(--textFaint);
   }
 
   .overlay {

src/components/user_panel/user_panel.vue

@@ -28,8 +28,13 @@
     backdrop-filter: var(--backdrop-filter);
   }
 
+  .other-actions {
+    top: -0.6em;
+    right: -0.6em;
+  }
+
   .user-info {
-    margin-bottom: 0;
+    margin-bottom: -1em;
 
     .background-image {
       max-height: 5.6em;