Update Follow button placement on profile page (#36298)

app/javascript/mastodon/components/follow_button.tsx

@@ -58,7 +58,8 @@ export const FollowButton: React.FC<{
   accountId?: string;
   compact?: boolean;
   labelLength?: 'auto' | 'short' | 'long';
-}> = ({ accountId, compact, labelLength = 'auto' }) => {
+  className?: string;
+}> = ({ accountId, compact, labelLength = 'auto', className }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const { signedIn } = useIdentity();
@@ -155,7 +156,7 @@ export const FollowButton: React.FC<{
         href='/settings/profile'
         target='_blank'
         rel='noopener'
-        className={classNames('button button-secondary', {
+        className={classNames(className, 'button button-secondary', {
           'button--compact': compact,
         })}
       >
@@ -174,7 +175,7 @@ export const FollowButton: React.FC<{
       }
       secondary={following}
       compact={compact}
-      className={following ? 'button--destructive' : undefined}
+      className={classNames(className, { 'button--destructive': following })}
     >
       {label}
     </Button>

app/javascript/mastodon/features/account_timeline/components/account_header.tsx

@@ -382,7 +382,7 @@ export const AccountHeader: React.FC<{
   const isRemote = account?.acct !== account?.username;
   const remoteDomain = isRemote ? account?.acct.split('@')[1] : null;
 
-  const menu = useMemo(() => {
+  const menuItems = useMemo(() => {
     const arr: MenuItem[] = [];
 
     if (!account) {
@@ -604,6 +604,15 @@ export const AccountHeader: React.FC<{
     handleUnblockDomain,
   ]);
 
+  const menu = accountId !== me && (
+    <Dropdown
+      disabled={menuItems.length === 0}
+      items={menuItems}
+      icon='ellipsis-v'
+      iconComponent={MoreHorizIcon}
+    />
+  );
+
   if (!account) {
     return null;
   }
@@ -720,7 +729,13 @@ export const AccountHeader: React.FC<{
   const isMovedAndUnfollowedAccount = account.moved && !relationship?.following;
 
   if (!isMovedAndUnfollowedAccount) {
-    actionBtn = <FollowButton accountId={accountId} />;
+    actionBtn = (
+      <FollowButton
+        accountId={accountId}
+        className='account__header__follow-button'
+        labelLength='long'
+      />
+    );
   }
 
   if (account.locked) {
@@ -802,18 +817,11 @@ export const AccountHeader: React.FC<{
               />
             </a>
 
-            <div className='account__header__tabs__buttons'>
+            <div className='account__header__buttons account__header__buttons--desktop'>
+              {!hidden && actionBtn}
               {!hidden && bellBtn}
               {!hidden && shareBtn}
-              {accountId !== me && (
+              {menu}
-                <Dropdown
-                  disabled={menu.length === 0}
-                  items={menu}
-                  icon='ellipsis-v'
-                  iconComponent={MoreHorizIcon}
-                />
-              )}
-              {!hidden && actionBtn}
             </div>
           </div>
 
@@ -843,6 +851,12 @@ export const AccountHeader: React.FC<{
             <FamiliarFollowers accountId={accountId} />
           )}
 
+          <div className='account__header__buttons account__header__buttons--mobile'>
+            {!hidden && actionBtn}
+            {!hidden && bellBtn}
+            {menu}
+          </div>
+
           {!(suspended || hidden) && (
             <div className='account__header__extra'>
               <div

app/javascript/styles/mastodon/components.scss

@@ -8410,47 +8410,6 @@ noscript {
     overflow: hidden;
     margin-inline-start: -2px; // aligns the pfp with content below
 
-    &__buttons {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding-top: 55px;
-      overflow: hidden;
-
-      .button {
-        flex-shrink: 1;
-        white-space: nowrap;
-        min-width: 80px;
-      }
-
-      .icon-button {
-        border: 1px solid var(--background-border-color);
-        border-radius: 4px;
-        box-sizing: content-box;
-        padding: 5px;
-
-        .icon {
-          width: 24px;
-          height: 24px;
-        }
-
-        &.copied {
-          border-color: $valid-value-color;
-        }
-      }
-
-      .optional {
-        @container account-header (max-width: 372px) {
-          display: none;
-        }
-
-        // Fallback for older browsers with no container queries support
-        @media screen and (max-width: (372px + 55px)) {
-          display: none;
-        }
-      }
-    }
-
     &__name {
       margin-top: 16px;
       margin-bottom: 16px;
@@ -8499,6 +8458,69 @@ noscript {
     }
   }
 
+  &__follow-button {
+    flex-grow: 1;
+  }
+
+  &__buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    $button-breakpoint: 420px;
+    $button-fallback-breakpoint: #{$button-breakpoint} + 55px;
+
+    &--desktop {
+      margin-top: 55px;
+
+      @container (width < #{$button-breakpoint}) {
+        display: none;
+      }
+
+      @supports (not (container-type: inline-size)) {
+        @media (max-width: #{$button-fallback-breakpoint}) {
+          display: none;
+        }
+      }
+    }
+
+    &--mobile {
+      margin-block: 16px;
+
+      @container (width >= #{$button-breakpoint}) {
+        display: none;
+      }
+
+      @supports (not (container-type: inline-size)) {
+        @media (min-width: (#{$button-fallback-breakpoint} + 1px)) {
+          display: none;
+        }
+      }
+    }
+
+    .button {
+      flex-shrink: 1;
+      white-space: nowrap;
+      min-width: 80px;
+    }
+
+    .icon-button {
+      border: 1px solid var(--background-border-color);
+      border-radius: 4px;
+      box-sizing: content-box;
+      padding: 5px;
+
+      .icon {
+        width: 24px;
+        height: 24px;
+      }
+
+      &.copied {
+        border-color: $valid-value-color;
+      }
+    }
+  }
+
   &__bio {
     .account__header__content {
       color: $primary-text-color;