Limit member label width

ts/components/AnnouncementsOnlyGroupBanner.dom.tsx

@@ -72,7 +72,7 @@ export function AnnouncementsOnlyGroupBanner({
                       />
                     </div>
                     {labelString && contactNameColor && (
-                      <div>
+                      <div className={tw('type-body-small')}>
                         <GroupMemberLabel
                           contactNameColor={contactNameColor}
                           contactLabel={{

ts/components/UserText.dom.tsx

@@ -1,11 +1,14 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 import React, { useMemo } from 'react';
+import type { CSSProperties } from 'react';
 import { Emojify } from './conversation/Emojify.dom.js';
 import { bidiIsolate } from '../util/unicodeBidi.std.js';
 
 export type UserTextProps = Readonly<{
   text: string;
+  fontSizeOverride?: number;
+  style?: CSSProperties;
 }>;
 
 export function UserText(props: UserTextProps): React.JSX.Element {
@@ -14,7 +17,11 @@ export function UserText(props: UserTextProps): React.JSX.Element {
   }, [props.text]);
   return (
     <span dir="auto">
-      <Emojify text={normalizedText} />
+      <Emojify
+        fontSizeOverride={props.fontSizeOverride}
+        style={props.style}
+        text={normalizedText}
+      />
     </span>
   );
 }

ts/components/conversation/ContactName.dom.stories.tsx

@@ -25,6 +25,37 @@ export function FirstNameAndTitleFirstNamePreferred(): React.JSX.Element {
   );
 }
 
+export function WithLongLabel(): React.JSX.Element {
+  return (
+    <div style={{ maxWidth: '400px', overflow: 'hidden' }}>
+      <ContactName
+        title="Troublemaker"
+        contactLabel={{
+          labelEmoji: '✅',
+          labelString:
+            "this is a long label. really long. why don't we see what happens?",
+        }}
+        contactNameColor="140"
+      />
+    </div>
+  );
+}
+
+export function WithLabelWithBigUnicode(): React.JSX.Element {
+  return (
+    <div style={{ maxWidth: '400px', overflow: 'hidden' }}>
+      <ContactName
+        title="Troublemaker"
+        contactLabel={{
+          labelEmoji: '✅',
+          labelString: '𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫𒐫',
+        }}
+        contactNameColor="140"
+      />
+    </div>
+  );
+}
+
 export function Colors(): React.JSX.Element {
   return (
     <>

ts/components/conversation/ContactName.dom.tsx

@@ -6,7 +6,6 @@ import classNames from 'classnames';
 
 import type { ReactNode } from 'react';
 
-import { Emojify } from './Emojify.dom.js';
 import { getClassNamesFor } from '../../util/getClassNamesFor.std.js';
 import { isSignalConversation as getIsSignalConversation } from '../../util/isSignalConversation.dom.js';
 import {
@@ -22,6 +21,7 @@ import type { MemberLabelType } from '../../types/GroupMemberLabels.std.js';
 import type { ConversationType } from '../../state/ducks/conversations.preload.js';
 import type { ContactNameColorType } from '../../types/Colors.std.js';
 import type { FunStaticEmojiSize } from '../fun/FunEmoji.dom.js';
+import { UserText } from '../UserText.dom.js';
 
 export type ContactNameData = {
   contactNameColor?: ContactNameColorType;
@@ -54,6 +54,7 @@ export function useContactNameData(
 }
 
 export type PropsType = ContactNameData & {
+  fontSizeOverride?: number;
   module?: string;
   preferFirstName?: boolean;
   onClick?: VoidFunction;
@@ -90,7 +91,7 @@ export function ContactName({
       dir="auto"
       onClick={onClick}
     >
-      <Emojify text={text} />
+      <UserText text={text} />
       {(isSignalConversation || isMe) && (
         <span
           className={
@@ -187,7 +188,14 @@ export function GroupMemberLabel({
             getClassName(`--label-pill--${context}--text`)
           )}
         >
-          <Emojify text={labelString} />
+          <UserText
+            fontSizeOverride={emojiSize}
+            style={{
+              verticalAlign: 'top',
+              marginTop: emojiSize / 6,
+            }}
+            text={labelString}
+          />
         </span>
       </span>
     </span>

ts/components/conversation/Emojify.dom.tsx

@@ -1,6 +1,7 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 import React from 'react';
+import type { CSSProperties } from 'react';
 import type { RenderTextCallbackType } from '../../types/Util.std.js';
 import { splitByEmoji } from '../../util/emoji.std.js';
 import { missingCaseError } from '../../util/missingCaseError.std.js';
@@ -23,6 +24,7 @@ export type Props = {
   isInvisible?: boolean;
   /** Allows you to customize now non-newlines are rendered. Simplest is just a <span>. */
   renderNonEmoji?: RenderTextCallbackType;
+  style?: CSSProperties;
 };
 
 const defaultRenderNonEmoji: RenderTextCallbackType = ({ text }) => text;
@@ -31,6 +33,7 @@ export function Emojify({
   fontSizeOverride,
   text,
   renderNonEmoji = defaultRenderNonEmoji,
+  style,
 }: Props): React.JSX.Element {
   const emojiLocalizer = useFunEmojiLocalizer();
   return (
@@ -59,6 +62,7 @@ export function Emojify({
               aria-label={emojiLocalizer.getLocaleShortName(variantKey)}
               emoji={variant}
               size={fontSizeOverride}
+              style={style}
             />
           );
         }

ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx

@@ -141,7 +141,7 @@ export function ConversationDetailsMembershipList({
                     />
                   </div>
                   {labelString && contactNameColor && (
-                    <div>
+                    <div className="ConversationDetails-membership-list--member-label">
                       <GroupMemberLabel
                         contactNameColor={contactNameColor}
                         contactLabel={{

ts/components/fun/FunEmoji.dom.tsx

@@ -153,6 +153,7 @@ export type FunInlineEmojiProps = FunImageAriaProps &
   Readonly<{
     size?: number | null;
     emoji: EmojiVariantData;
+    style?: CSSProperties;
   }>;
 
 export function FunInlineEmoji(props: FunInlineEmojiProps): React.JSX.Element {
@@ -175,6 +176,7 @@ export function FunInlineEmoji(props: FunInlineEmojiProps): React.JSX.Element {
         {
           '--fun-inline-emoji-size':
             props.size != null ? `${props.size}px` : null,
+          ...props.style,
         } as CSSProperties
       }
     >