[Glitch] Profile redesign: Profile fields overflow

Port e8f4896b08 to glitch-soc

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

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,

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;

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'

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;