Skip to content

fix(reactions): wrap long popover names - #3834

Open
tellaho wants to merge 4 commits into
mainfrom
tho/reaction-popover-wrap
Open

fix(reactions): wrap long popover names#3834
tellaho wants to merge 4 commits into
mainfrom
tho/reaction-popover-wrap

Conversation

@tellaho

@tellaho tellaho commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Category: fix
User Impact: Long custom emoji names now stay contained inside reaction popovers and remain fully readable.

Problem: An unbroken custom emoji name could force a reaction popover beyond its intended maximum width and overflow the message view.

Solution: Give the reaction popover a definite 288px width and allow the complete emoji name to wrap within it without truncation or ellipsis. Short names retain the same content and interaction behavior.

File changes

desktop/src/features/messages/ui/MessageReactions.tsx
Bounds the reaction popover width and allows long names to break across lines while preserving the full shortcode.

desktop/tests/e2e/reaction-names.spec.ts
Covers fixed width, full text preservation, and wrapping for the maximum supported colon-wrapped reaction name, with deterministic seeded Picsum visual fixtures and explicit image-load waits.

Reproduction Steps

  1. Open a message with a custom emoji reaction whose name is 64 characters.
  2. Hover or focus the reaction pill to open its details popover.
  3. Confirm the popover remains 288px wide and the complete name wraps within it without ellipsis.
  4. Open a short-name reaction and confirm its popover remains readable and unchanged in behavior.

Screenshots

Before After
Maximum-length name before Maximum-length name after

Short-name regression check

Short reaction name

Verification

  • pnpm test in desktop: 3,858 passed
  • Focused reaction-name E2E with seeded Picsum captures: 2 passed
  • Desktop checks and commit hooks passed

Originating Buzz channel: f2ec9671-d78e-4cde-894c-9f4c458c7f1f

npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w and others added 2 commits July 30, 2026 16:45
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
@tellaho
tellaho marked this pull request as ready for review July 31, 2026 03:36
@tellaho
tellaho requested a review from a team as a code owner July 31, 2026 03:36
@block block deleted a comment from chatgpt-codex-connector Bot Jul 31, 2026
@tellaho

tellaho commented Jul 31, 2026

Copy link
Copy Markdown
Contributor Author

@codex

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f8cb907e3b

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread desktop/tests/e2e/reaction-names.spec.ts Outdated
npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w and others added 2 commits July 30, 2026 21:02
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
@Chessing234

Copy link
Copy Markdown
Contributor

looks clean. can the e2e assert the popover width stays <= 288 so a future css tweak doesnt silently rebreak it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants