Update profile page design

src/views/Profile.vue

@@ -5,19 +5,8 @@
         <div class="profile-header">
           <img v-if="profile.header" :src="profile.header">
         </div>
-        <div class="profile-info">
+        <div class="avatar-group">
           <avatar :profile="profile"></avatar>
-          <div class="name-group">
-            <div class="display-name">{{ profile.display_name || profile.username }}</div>
-            <div class="actor-address">@{{ actorAddress }}</div>
-          </div>
-          <div class="buttons">
-            <router-link v-if="isCurrentUser()" class="edit-profile btn" to="/settings">Edit profile</router-link>
-            <button v-if="canFollow()" class="follow btn" @click="follow()">Follow</button>
-            <button v-if="canUnfollow()" class="unfollow btn" @click="unfollow()">
-              <template v-if="isFollowRequestPending()">Cancel follow request</template>
-              <template v-else>Unfollow</template>
-            </button>
           <div
             v-if="!isLocalUser()"
             class="dropdown-menu-wrapper"
@@ -42,6 +31,19 @@
             </ul>
           </div>
         </div>
+        <div class="name-buttons-group">
+          <div class="name-group">
+            <div class="display-name">{{ profile.display_name || profile.username }}</div>
+            <div class="actor-address">@{{ actorAddress }}</div>
+          </div>
+          <div class="buttons">
+            <router-link v-if="isCurrentUser()" class="edit-profile btn" to="/settings">Edit profile</router-link>
+            <button v-if="canFollow()" class="follow btn" @click="follow()">Follow</button>
+            <button v-if="canUnfollow()" class="unfollow btn" @click="unfollow()">
+              <template v-if="isFollowRequestPending()">Cancel follow request</template>
+              <template v-else>Unfollow</template>
+            </button>
+          </div>
         </div>
         <div class="bio" v-html="profile.note"></div>
         <div class="extra-fields" v-if="profile.fields.length > 0">
@@ -257,6 +259,8 @@ export default class ProfileView extends Vue {
 $avatar-size: 170px;
 
 .profile-block {
+  @include block-btn;
+
   background-color: $block-background-color;
   border-radius: $block-border-radius;
   margin-bottom: $block-outer-padding;
@@ -275,14 +279,9 @@ $avatar-size: 170px;
   }
 }
 
-.profile-info {
+.avatar-group {
-  @include block-btn;
-
-  align-items: flex-start;
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
-  gap: $block-inner-padding;
   padding: $block-inner-padding;
 
   .avatar {
@@ -293,8 +292,36 @@ $avatar-size: 170px;
     width: $avatar-size;
   }
 
+  .dropdown-menu-wrapper {
+    @include post-dropdown-menu;
+
+    margin-left: auto;
+
+    /* stylelint-disable-next-line selector-max-compound-selectors */
+    button img {
+      height: 32px;
+      min-width: 20px;
+      object-fit: none;
+      width: 20px;
+    }
+
+    .dropdown-menu {
+      right: 0;
+    }
+  }
+}
+
+.name-buttons-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: $block-inner-padding;
+  padding: 0 $block-inner-padding $block-inner-padding;
+
   .name-group {
     flex-grow: 1;
+    font-size: 16px;
+    line-height: 1.3;
     overflow-x: hidden;
 
     .display-name {
@@ -311,9 +338,7 @@ $avatar-size: 170px;
 
   .buttons {
     display: flex;
-    flex-grow: 1;
     gap: $block-inner-padding;
-    justify-content: right;
   }
 }
 
@@ -373,16 +398,6 @@ $avatar-size: 170px;
   }
 }
 
-.dropdown-menu-wrapper {
-  @include post-dropdown-menu;
-
-  align-self: center;
-
-  .dropdown-menu {
-    right: 0;
-  }
-}
-
 .profile {
   margin-bottom: $block-outer-padding;
 }