Fix styling of follow requests (#39452)

app/javascript/mastodon/components/account_bio/index.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 
-import { useAppSelector } from '../store';
+import { useAppSelector } from '../../store';
+import { EmojiHTML } from '../emoji/html';
+import { useElementHandledLink } from '../status/handled_link';
 
-import { EmojiHTML } from './emoji/html';
+import classes from './styles.module.scss';
-import { useElementHandledLink } from './status/handled_link';
 
 interface AccountBioProps {
   className?: string;
@@ -12,7 +13,7 @@ interface AccountBioProps {
 }
 
 export const AccountBio: React.FC<AccountBioProps> = ({
-  className,
+  className = classes.bio,
   accountId,
   showDropdown = false,
 }) => {

app/javascript/mastodon/components/account_bio/styles.module.scss

@@ -0,0 +1,22 @@
+.bio {
+  font-size: 15px;
+  color: var(--color-text-primary);
+  unicode-bidi: plaintext;
+  overflow-wrap: anywhere;
+
+  p {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  :any-link {
+    color: var(--color-text-status-links);
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

app/javascript/mastodon/components/account_header/index.tsx

@@ -148,11 +148,7 @@ export const AccountHeader: React.FC<{
             <div className={classes.bioButtonsWrapper}>
               {me && account.id !== me && <AccountNote accountId={accountId} />}
 
-              <AccountBio
+              <AccountBio showDropdown accountId={accountId} />
-                showDropdown
-                accountId={accountId}
-                className={classes.bio}
-              />
 
               <AccountHeaderFields accountId={accountId} />
 

app/javascript/mastodon/components/account_header/styles.module.scss

@@ -274,29 +274,6 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
-.bio {
-  font-size: 15px;
-  color: var(--color-text-primary);
-  unicode-bidi: plaintext;
-  overflow-wrap: anywhere;
-
-  p {
-    margin-bottom: 20px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  :any-link {
-    color: var(--color-text-status-links);
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
 .familiarFollowers {
   margin-top: 16px;
 }