Limit member label width

Co-authored-by: Scott Nonnenberg <scott@signal.org>

stylesheets/_modules.scss

@@ -1072,8 +1072,10 @@ $message-padding-horizontal: 12px;
 .module-message__author {
   @include mixins.font-body-small-bold;
 
-  min-height: 18px;
   user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 3px;
 }
 
 .module-message__author_with_sticker {

stylesheets/components/ContactModal.scss

@@ -72,12 +72,13 @@
     @include mixins.button-focus-outline;
 
     & {
-      border: 1px solid transparent;
       // Note: matches the border radius in ContactName.scss, for --label-pill
       border-radius: 9px;
 
       margin-top: 6px;
       margin-bottom: 4px;
+
+      max-width: 100%;
     }
   }
 

stylesheets/components/ContactName.scss

@@ -286,17 +286,25 @@ $contact-colors: (
     padding-block: 1px;
     border-radius: 9px;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &--label-pill--inner {
     display: flex;
     align-items: center;
     white-space: nowrap;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   &--label-pill--bubble {
-    margin-top: -2px;
-    margin-bottom: 2px;
+    margin-inline-start: 2px;
+    margin-bottom: -4px;
+    max-width: calc(100% - 2px);
   }
 
   &--label-pill--emoji {
@@ -318,8 +326,14 @@ $contact-colors: (
     }
   }
 
+  &--label-pill--list {
+    margin-bottom: -5px;
+  }
+
   &--label-pill--text {
     display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   @each $name, $value in $contact-colors {

stylesheets/components/ConversationDetails.scss

@@ -45,6 +45,10 @@
     }
   }
 
+  &-membership-list--member-label {
+    @include mixins.font-body-small;
+  }
+
   &__block-group {
     color: variables.$color-accent-red;
   }
@@ -350,6 +354,7 @@
       flex-grow: 1;
       text-align: start;
       margin-inline-end: 12px;
+      min-width: 0;
     }
 
     &__info {
@@ -367,7 +372,7 @@
     &__right {
       position: relative;
       color: variables.$color-gray-45;
-      min-width: 143px;
+      min-width: 100px;
     }
 
     &__actions {

stylesheets/components/Quote.scss

@@ -180,6 +180,8 @@
   min-height: 54px;
   border-style: solid;
   border-width: 0 0 0 4px;
+
+  max-width: 100%;
 }
 
 .module-quote__primary__author {
@@ -189,6 +191,7 @@
   align-items: center;
   gap: 4px;
 
+  max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

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