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;
-    border-bottom: 1px solid var(--border);
+
+    &: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;
-      height: 6em;
+      width: 7em;
+      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,52 +313,52 @@
           />
         </dd>
       </dl>
-      <div class="user-extras">
-        <span
-          v-if="!hideBio && !mergedConfig.hideUserStats"
-          class="user-stats"
+    </div>
+    <div class="user-extras" v-if="!hideBio">
+      <span
+        v-if="!mergedConfig.hideUserStats"
+        class="user-stats"
+      >
+        <dl
+          class="user-count"
+          @click.prevent="setProfileView('statuses')"
+          v-if="!mergedConfig.hideUserStats && !hideBio"
         >
-          <dl
-            class="user-count"
-            @click.prevent="setProfileView('statuses')"
-            v-if="!mergedConfig.hideUserStats && !hideBio"
-          >
-            <dd>{{ user.statuses_count }}</dd>
-            {{ ' ' }}
-            <dt>{{ $t('user_card.statuses') }}</dt>
-          </dl>
-          <dl
-            class="user-count"
-            @click.prevent="setProfileView('statuses')"
-          >
-            <dd>{{ dailyAvg }}</dd>
-            {{ ' ' }}
-            <dt>{{ $t('user_card.statuses_per_day') }}</dt>
-          </dl>
-          <dl
-            class="user-count"
-            @click.prevent="setProfileView('friends')"
-          >
-            <dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
-            {{ ' ' }}
-            <dt>{{ $t('user_card.followees') }}</dt>
-          </dl>
-          <dl
-            class="user-count"
-            @click.prevent="setProfileView('followers')"
-          >
-            <dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
-            {{ ' ' }}
-            <dt>{{ $t('user_card.followers') }}</dt>
-          </dl>
-        </span>
-        <div class="birthday" v-if="!hideBio && !!user.birthday">
-          <FAIcon
-            class="fa-old-padding"
-            icon="birthday-cake"
-          />
-          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-        </div>
+          <dd>{{ user.statuses_count }}</dd>
+          {{ ' ' }}
+          <dt>{{ $t('user_card.statuses') }}</dt>
+        </dl>
+        <dl
+          class="user-count"
+          @click.prevent="setProfileView('statuses')"
+        >
+          <dd>{{ dailyAvg }}</dd>
+          {{ ' ' }}
+          <dt>{{ $t('user_card.statuses_per_day') }}</dt>
+        </dl>
+        <dl
+          class="user-count"
+          @click.prevent="setProfileView('friends')"
+        >
+          <dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
+          {{ ' ' }}
+          <dt>{{ $t('user_card.followees') }}</dt>
+        </dl>
+        <dl
+          class="user-count"
+          @click.prevent="setProfileView('followers')"
+        >
+          <dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
+          {{ ' ' }}
+          <dt>{{ $t('user_card.followers') }}</dt>
+        </dl>
+      </span>
+      <div class="birthday" v-if="!hideBio && !!user.birthday">
+        <FAIcon
+          class="fa-old-padding"
+          icon="birthday-cake"
+        />
+        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
       </div>
     </div>
     <teleport to="#modal">

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: {
-    shouldShow () {
-      return this.relationship.note || this.editing
+  watch: {
+    relationship () {
+      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;
-  }
-
-  .note-text.-blank {
-    font-style: italic;
-    color: var(--textFaint);
+    min-width: 100%;
+    margin: -0.6em;
   }
 
   .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;