From 2398edf1b7dae9fc8848ec9fffd7a2e46a693ff7 Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Fri, 6 Feb 2026 10:08:34 +1000 Subject: [PATCH] Limit member label width --- stylesheets/_modules.scss | 4 ++- stylesheets/components/ContactModal.scss | 3 +- stylesheets/components/ContactName.scss | 18 +++++++++-- .../components/ConversationDetails.scss | 7 ++++- stylesheets/components/Quote.scss | 3 ++ .../AnnouncementsOnlyGroupBanner.dom.tsx | 2 +- ts/components/UserText.dom.tsx | 9 +++++- .../conversation/ContactName.dom.stories.tsx | 31 +++++++++++++++++++ .../conversation/ContactName.dom.tsx | 14 +++++++-- ts/components/conversation/Emojify.dom.tsx | 4 +++ .../ConversationDetailsMembershipList.dom.tsx | 2 +- ts/components/fun/FunEmoji.dom.tsx | 2 ++ 12 files changed, 88 insertions(+), 11 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 9098ca1d59..d9f8f5b262 100644 --- a/stylesheets/_modules.scss +++ b/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 { diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss index 38acaa6afc..c5dfac3c0a 100644 --- a/stylesheets/components/ContactModal.scss +++ b/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%; } } diff --git a/stylesheets/components/ContactName.scss b/stylesheets/components/ContactName.scss index 259728a460..ffc68b4a05 100644 --- a/stylesheets/components/ContactName.scss +++ b/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 { diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss index 6b15cd95fe..2b6b54ef03 100644 --- a/stylesheets/components/ConversationDetails.scss +++ b/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 { diff --git a/stylesheets/components/Quote.scss b/stylesheets/components/Quote.scss index 3eece68791..4301e8a7da 100644 --- a/stylesheets/components/Quote.scss +++ b/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; diff --git a/ts/components/AnnouncementsOnlyGroupBanner.dom.tsx b/ts/components/AnnouncementsOnlyGroupBanner.dom.tsx index 68170ea7bf..2810e10963 100644 --- a/ts/components/AnnouncementsOnlyGroupBanner.dom.tsx +++ b/ts/components/AnnouncementsOnlyGroupBanner.dom.tsx @@ -72,7 +72,7 @@ export function AnnouncementsOnlyGroupBanner({ /> {labelString && contactNameColor && ( -
+
; export function UserText(props: UserTextProps): React.JSX.Element { @@ -14,7 +17,11 @@ export function UserText(props: UserTextProps): React.JSX.Element { }, [props.text]); return ( - + ); } diff --git a/ts/components/conversation/ContactName.dom.stories.tsx b/ts/components/conversation/ContactName.dom.stories.tsx index 53dd49bcbc..aad2aed64f 100644 --- a/ts/components/conversation/ContactName.dom.stories.tsx +++ b/ts/components/conversation/ContactName.dom.stories.tsx @@ -25,6 +25,37 @@ export function FirstNameAndTitleFirstNamePreferred(): React.JSX.Element { ); } +export function WithLongLabel(): React.JSX.Element { + return ( +
+ +
+ ); +} + +export function WithLabelWithBigUnicode(): React.JSX.Element { + return ( +
+ +
+ ); +} + export function Colors(): React.JSX.Element { return ( <> diff --git a/ts/components/conversation/ContactName.dom.tsx b/ts/components/conversation/ContactName.dom.tsx index 8234f63ea8..715183bcff 100644 --- a/ts/components/conversation/ContactName.dom.tsx +++ b/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} > - + {(isSignalConversation || isMe) && ( - + diff --git a/ts/components/conversation/Emojify.dom.tsx b/ts/components/conversation/Emojify.dom.tsx index 3003efc7be..2ef5606e19 100644 --- a/ts/components/conversation/Emojify.dom.tsx +++ b/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 . */ 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} /> ); } diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx index b5180fb0b7..2a4b4cd18e 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.dom.tsx @@ -141,7 +141,7 @@ export function ConversationDetailsMembershipList({ />
{labelString && contactNameColor && ( -
+
; 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 } >