From 2a5a64d057a807821c715f2d5a92c25757414ff3 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 8 Apr 2026 15:16:45 +0200
Subject: [PATCH] [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>
---
 .../components/account_header.tsx             |  3 --
 .../components/account_name.tsx               |  3 ++
 .../components/account_subscription_form.tsx  |  5 ++-
 .../account_timeline/components/badges.tsx    |  4 ++-
 .../components/styles.module.scss             | 33 +++++++++++--------
 5 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx
index 8300dfb371..ba5001b716 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx
+++ b/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 && (
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx
index b80892881b..26815560d2 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/account_name.tsx
+++ b/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>
   );
 };
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx
index aaea6d710a..d5dd05e417 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx
+++ b/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
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx
index 83a6220b7e..96aaa60a01 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/badges.tsx
+++ b/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) {
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss b/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss
index e8399cf44a..9c13026b97 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/styles.module.scss
+++ b/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;