From f8ab13649238af260ade1c6d33dbbbea279478ad Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 28 May 2026 16:29:11 -0400
Subject: [PATCH] fix: cap status message length and constrain display overflow

Add maxLength=128 to the status input to prevent absurdly long statuses.
In UserHeroName (profile panel), tighten the status display to LineClamp2,
add overflow:hidden on the container, and use overflowWrap:anywhere so
unbroken strings (emoji chains, URLs) wrap instead of overflowing.
Member list already truncates via the truncate prop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/components/user-profile/UserHero.tsx  | 10 +++++++---
 src/app/features/settings/account/Profile.tsx |  1 +
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 90faf0545..afdcf1688 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -16,7 +16,7 @@ import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import { BreakWord, LineClamp2, LineClamp3 } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
@@ -117,8 +117,12 @@ export function UserHeroName({ displayName, userId, status }: UserHeroNameProps)
         </Text>
       </Box>
       {status && (
-        <Box alignItems="Center" gap="100" wrap="Wrap" style={{ marginTop: '2px' }}>
-          <Text size="T200" className={classNames(BreakWord, LineClamp3)} style={{ opacity: 0.75 }}>
+        <Box alignItems="Center" gap="100" style={{ marginTop: '2px', overflow: 'hidden' }}>
+          <Text
+            size="T200"
+            className={classNames(BreakWord, LineClamp2)}
+            style={{ opacity: 0.75, overflowWrap: 'anywhere' }}
+          >
             {status}
           </Text>
         </Box>
diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index c992539d0..393fec523 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -446,6 +446,7 @@ function ProfileStatus() {
               variant="Secondary"
               radii="300"
               readOnly={saving}
+              maxLength={128}
             />
           </Box>
           <PopOut