Adjust account__action-bar contents (#7818)

app/javascript/mastodon/features/account/components/action_bar.js

@@ -140,10 +140,6 @@ export default class ActionBar extends React.PureComponent {
         {extraInfo}
 
         <div className='account__action-bar'>
-          <div className='account__action-bar-dropdown'>
-            <DropdownMenuContainer items={menu} icon='bars' size={24} direction='right' />
-          </div>
-
           <div className='account__action-bar-links'>
             <Link className='account__action-bar__tab' to={`/accounts/${account.get('id')}`}>
               <span><FormattedMessage id='account.posts' defaultMessage='Toots' /></span>
@@ -160,6 +156,10 @@ export default class ActionBar extends React.PureComponent {
               <strong>{shortNumberFormat(account.get('followers_count'))}</strong>
             </Link>
           </div>
+
+          <div className='account__action-bar-dropdown'>
+            <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
+          </div>
         </div>
       </div>
     );

app/javascript/styles/mastodon/components.scss

@@ -1211,6 +1211,10 @@ a .account__avatar {
   flex: 0 1 calc(50% - 140px);
   padding: 10px;
 
+  .icon-button {
+    vertical-align: middle;
+  }
+
   .dropdown--active {
     .dropdown__content.dropdown__right {
       left: 6px;
@@ -1230,13 +1234,14 @@ a .account__avatar {
   display: flex;
   flex: 1 1 auto;
   line-height: 18px;
+  text-align: center;
 }
 
 .account__action-bar__tab {
   text-decoration: none;
   overflow: hidden;
   flex: 0 1 80px;
-  border-left: 1px solid lighten($ui-base-color, 8%);
+  border-right: 1px solid lighten($ui-base-color, 8%);
   padding: 10px 5px;
 
   & > span {