[Glitch] Allow "Follows you" badge to wrap along with profile heading

Port e65fedd6721e8008fffb30c65a4671e988282a3f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx

@@ -21,7 +21,6 @@ import { useAppSelector, useAppDispatch } from '@/flavours/glitch/store';
 
 import { AccountName } from './account_name';
 import { AccountSubscriptionForm } from './account_subscription_form';
-import { AccountBadges } from './badges';
 import { AccountButtons } from './buttons';
 import { FamiliarFollowers } from './familiar_followers';
 import { AccountHeaderFields } from './fields';
@@ -163,8 +162,6 @@ export const AccountHeader: React.FC<{
             />
           </div>
 
-          <AccountBadges accountId={accountId} />
-
           <AccountNumberFields accountId={accountId} />
 
           {!isMe && !suspendedOrHidden && (

app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx

@@ -21,6 +21,7 @@ import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
 import HelpIcon from '@/material-icons/400-24px/help.svg?react';
 import DomainIcon from '@/material-icons/400-24px/language.svg?react';
 
+import { AccountBadges } from './badges';
 import classes from './styles.module.scss';
 
 const messages = defineMessages({
@@ -77,6 +78,8 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
         domain={domain}
         isSelf={account.id === me}
       />
+
+      <AccountBadges accountId={accountId} />
     </div>
   );
 };

app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx

@@ -3,6 +3,7 @@ import { useState, useCallback, useId } from 'react';
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 
+import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
 import { AxiosError } from 'axios';
@@ -127,7 +128,9 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
 
   if (submitted) {
     return (
-      <div className={classes.bannerBaseCentered}>
+      <div
+        className={classNames(classes.bannerBase, classes.bannerBaseCentered)}
+      >
         <div className={classes.bannerTextAndActions}>
           <h2>
             <FormattedMessage

app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx

@@ -16,6 +16,8 @@ import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import type { AccountRole } from '@/flavours/glitch/models/account';
 import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
 
+import classes from './styles.module.scss';
+
 export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
   const account = useAccount(accountId);
   const localDomain = useAppSelector(
@@ -101,7 +103,7 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     return null;
   }
 
-  return <div className={'account__header__badges'}>{badges}</div>;
+  return <div className={classes.badges}>{badges}</div>;
 };
 
 function isAdminBadge(role: AccountRole) {

app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss

@@ -28,14 +28,12 @@
 }
 
 .name {
-  display: flex;
-  gap: 2px;
-  align-items: baseline;
-
   > h1 {
+    display: inline;
     font-size: 22px;
     line-height: normal;
     white-space: initial;
+    margin-inline-end: 4px;
   }
 }
 
@@ -43,6 +41,10 @@
   color: var(--color-text-secondary);
 }
 
+.badges {
+  margin-top: 8px;
+}
+
 .handleHelpButton {
   display: flex;
   gap: 2px;
@@ -191,6 +193,10 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   font-size: 15px;
 }
 
+.familiarFollowers {
+  margin-top: 16px;
+}
+
 .note {
   margin-bottom: 16px;
 }
@@ -406,6 +412,15 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   margin: 16px 0;
 }
 
+.bannerBaseCentered {
+  min-height: 146px;
+  align-items: center;
+
+  .bannerTextAndActions {
+    text-align: center;
+  }
+}
+
 .bannerTextAndActions {
   display: flex;
   flex-direction: column;
@@ -426,16 +441,6 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
-.bannerBaseCentered {
-  composes: bannerBase;
-  min-height: 146px;
-  align-items: center;
-
-  .bannerTextAndActions {
-    text-align: center;
-  }
-}
-
 .bannerInputButton {
   display: flex;
   gap: 8px;