[Glitch] Improve layout and spacing of number fields

Port cf7a092053 to glitch-soc

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

app/javascript/flavours/glitch/components/account_header/number_fields.tsx

@@ -11,6 +11,8 @@ import { FormattedDateWrapper } from '../formatted_date';
 import { NumberFields, NumberFieldsItem } from '../number_fields';
 import { ShortNumber } from '../short_number';
 
+import classes from './styles.module.scss';
+
 export const AccountNumberFields: FC<{ accountId: string }> = ({
   accountId,
 }) => {
@@ -33,7 +35,7 @@ export const AccountNumberFields: FC<{ accountId: string }> = ({
   }
 
   return (
-    <NumberFields>
+    <NumberFields className={classes.numberFields}>
       <NumberFieldsItem
         label={
           <FormattedMessage id='account.followers' defaultMessage='Followers' />

app/javascript/flavours/glitch/components/account_header/styles.module.scss

@@ -263,6 +263,12 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
+.numberFields {
+  @container (width >= #{$button-breakpoint}) {
+    --number-fields-gap: 40px;
+  }
+}
+
 .bio {
   font-size: 15px;
   color: var(--color-text-primary);