From 15b5812e17aaa7e94af46c2fcb8a8ecb7166419e Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Fri, 8 May 2026 15:30:20 +0200
Subject: [PATCH] [Glitch] Improve layout and spacing of number fields

Port cf7a092053644407c1bcb23dd979bbb359b1f313 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/account_header/number_fields.tsx      | 4 +++-
 .../glitch/components/account_header/styles.module.scss     | 6 ++++++
 .../glitch/components/account_list_item/styles.module.scss  | 1 -
 .../glitch/components/number_fields/styles.module.scss      | 4 +++-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/account_header/number_fields.tsx b/app/javascript/flavours/glitch/components/account_header/number_fields.tsx
index 62eb36957a..a9ccda6eae 100644
--- a/app/javascript/flavours/glitch/components/account_header/number_fields.tsx
+++ b/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' />
diff --git a/app/javascript/flavours/glitch/components/account_header/styles.module.scss b/app/javascript/flavours/glitch/components/account_header/styles.module.scss
index 65775147cd..00ea9365cb 100644
--- a/app/javascript/flavours/glitch/components/account_header/styles.module.scss
+++ b/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);
diff --git a/app/javascript/flavours/glitch/components/account_list_item/styles.module.scss b/app/javascript/flavours/glitch/components/account_list_item/styles.module.scss
index 6a23f2f5f1..a49f47b12a 100644
--- a/app/javascript/flavours/glitch/components/account_list_item/styles.module.scss
+++ b/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;
 
diff --git a/app/javascript/flavours/glitch/components/number_fields/styles.module.scss b/app/javascript/flavours/glitch/components/number_fields/styles.module.scss
index f71f690e9c..d4e8bd9c30 100644
--- a/app/javascript/flavours/glitch/components/number_fields/styles.module.scss
+++ b/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);
 }