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

@@ -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>

src/app/features/settings/account/Profile.tsx

@@ -446,6 +446,7 @@ function ProfileStatus() {
               variant="Secondary"
               radii="300"
               readOnly={saving}
+              maxLength={128}
             />
           </Box>
           <PopOut