[Glitch] Improve layout and spacing of number fields

Port cf7a092053644407c1bcb23dd979bbb359b1f313 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);

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

@@ -1,7 +1,6 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  align-items: start;
   gap: 12px;
   padding: 16px;
 

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

@@ -1,9 +1,11 @@
 .list {
+  --item-gap: var(--number-fields-gap, 24px);
+
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
-  gap: 4px 24px;
+  gap: 4px var(--item-gap);
   font-size: 13px;
   color: var(--color-text-secondary);
 }