From 3264c285dc8767c8ec5783920288e8cdebd5687c Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Wed, 1 Apr 2026 16:01:22 +0200
Subject: [PATCH] [Glitch] Profile redesign: Profile fields overflow

Port e8f4896b08ca5f67911eb62f801afc976b4c2183 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/features/account_edit/modals/fields_modals.tsx    | 2 +-
 .../flavours/glitch/features/account_edit/styles.module.scss | 5 +++++
 .../glitch/features/account_timeline/modals/field_modal.tsx  | 1 +
 .../features/account_timeline/modals/styles.module.css       | 5 +++++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/features/account_edit/modals/fields_modals.tsx b/app/javascript/flavours/glitch/features/account_edit/modals/fields_modals.tsx
index 0432c08471..725252a9a5 100644
--- a/app/javascript/flavours/glitch/features/account_edit/modals/fields_modals.tsx
+++ b/app/javascript/flavours/glitch/features/account_edit/modals/fields_modals.tsx
@@ -210,7 +210,7 @@ export const EditFieldModal = forwardRef<
 
     const labelStatus = checkField(newLabel);
     const valueStatus = checkField(newValue);
-    if (labelStatus || valueStatus) {
+    if (labelStatus?.variant === 'error' || valueStatus?.variant === 'error') {
       setFieldStatuses({
         label: labelStatus ?? undefined,
         value: valueStatus ?? undefined,
diff --git a/app/javascript/flavours/glitch/features/account_edit/styles.module.scss b/app/javascript/flavours/glitch/features/account_edit/styles.module.scss
index cd3d34f31b..1ca1e4646c 100644
--- a/app/javascript/flavours/glitch/features/account_edit/styles.module.scss
+++ b/app/javascript/flavours/glitch/features/account_edit/styles.module.scss
@@ -182,6 +182,11 @@
 
 // Field component
 
+.fieldName,
+.fieldValue {
+  word-break: break-all;
+}
+
 .fieldName {
   color: var(--color-text-secondary);
   font-size: 13px;
diff --git a/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx b/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
index d724abd1d9..d13ab5bfaf 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
@@ -28,6 +28,7 @@ export const AccountFieldModal: FC<{
           as='h2'
           htmlString={field.name_emojified}
           onElement={handleLabelElement}
+          className={classes.fieldName}
         />
         <EmojiHTML
           as='p'
diff --git a/app/javascript/flavours/glitch/features/account_timeline/modals/styles.module.css b/app/javascript/flavours/glitch/features/account_timeline/modals/styles.module.css
index 4740a42cb9..6266551e2d 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/modals/styles.module.css
+++ b/app/javascript/flavours/glitch/features/account_timeline/modals/styles.module.css
@@ -20,6 +20,11 @@
   outline-offset: 2px;
 }
 
+.fieldName,
+.fieldValue {
+  word-break: break-all;
+}
+
 .fieldValue {
   color: var(--color-text-primary);
   font-weight: 600;