[arifhossen-dev]

Summary

Closes #1275.

In remotes, a message's react button sits just past the bubble's end (right of their messages, left of mine), but the reaction tray opened under the bubble's other edge. On a long message you had to move the pointer across the whole bubble to reach the emojis or the full picker.

The tray and its full picker now line up with the side the react button is on, so the emojis open right under the pointer.

Changes

• ReactionTray aligns its row to the react button's side: the end for their messages, the start for mine. The full picker's align follows the same side.
• Pinned messages use the same tray with placement="beside", floating next to the trigger. They keep their current layout.
• Touch devices are unchanged: they use the reaction sheet, and the tray is hidden on coarse pointers.
• Added a unit test covering their messages, my messages, and the beside placement. It fails on production and passes here.

Validation

Local (macOS, PHP 8.5, PostgreSQL 18):

• bunx vp test run tests/Unit/ReactionTray.test.tsx: 24 passed
• bun run test:unit: 212 passed, 0 failed
• bun run test:lint: passed (only existing warnings in other files)
• bun run test:types: passed
• phpstan: 0 errors
• pest --type-coverage --min=100: 100.0%
• pest --parallel (no coverage): 4,828 passed
• Not run locally: pest --coverage --exactly=100.0, because no coverage driver is installed. No PHP changed; CI runs it with pcov.
• pint --test and rector --dry-run only flagged gitignored, locally generated files (bootstrap/cache/*.php, public/frankenphp-worker.php), not files in this change.

Hosted CI: pending.

Visual evidence

Light theme, Chromium in the Claude desktop browser pane, fine pointer, 718×773 CSS px viewport at DPR 2, local seed data. The tray is opened from the react button on a long message.

	Before (production)	After (this branch)
Their message (react button on the right)
My message (react button on the left)

Also checked on this branch: the full emoji picker opens anchored to the "More reactions" button, and Escape closes the picker and then the tray. Layout shift wasn't measured. The tray's fold animation and height are unchanged; only its horizontal alignment moved.

Device verification

Desktop only (macOS, Chromium-based browser pane, mouse). This change doesn't affect mobile interactions: on coarse pointers the tray is hidden (pointer-coarse:hidden) and reactions use the bottom sheet, which this change doesn't touch.

Independent review

Reviewer: a separate Claude Code subagent that hadn't seen the implementation reasoning. It reviewed base 704f8c84 and head b945a7a3, and the four screenshots above.

• CODE: PASS. The alignment matches where BubbleActions puts the react button. Pinned messages (placement="beside") resolve to the same justify-end / align="end" as before. ReactionTray has only two callers. The new test fails on base and follows the file's patterns. Nit, not blocking: the test finds the row by a class substring.
• VISUAL: PASS. In both "after" shots the tray opens under the react button's side. There's no clipping and no overlap with the timestamp or status.
• Limits: The reviewer didn't see the dark theme, pinned messages on screen, short bubbles narrower than the tray, or messages that are only images or voice notes or have wide link cards or reply quotes. They didn't check narrow viewports either; the tray is hidden on coarse pointers anyway.

Limitations

• Not checked visually: dark theme, pinned messages in orgs (covered by the unit test only), and messages where a link card or image is wider than the text. In that last case the tray lines up with the message column, not the text bubble.
• Full coverage run left to CI.
• The second click to open the full emoji picker (also mentioned in listing emojis on remotes is not very user-friendly #1275) is unchanged on purpose; open to changing it if maintainers want.

Summary by CodeRabbit

• Bug Fixes
  • Improved reaction tray and emoji picker alignment based on message ownership and placement. Messages shown beside the conversation now align both to the end; messages shown below align based on who sent them.

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 325ef05f-ac32-48e6-8153-b14bc784a790

Commits

Reviewing files that changed from the base of the PR and between 704f8c8 and b945a7a.

Files selected for processing: 2

• resources/js/components/chat/message-reactions.tsx
• tests/Unit/ReactionTray.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

ReactionTray now aligns the tray row and emoji picker based on message ownership and placement. Tests cover alignment for incoming messages, outgoing messages placed below, and beside placement.

Changes: Reaction tray alignment

Layer / File(s)	Summary
Placement-aware alignment resources/js/components/chat/message-reactions.tsx, tests/Unit/ReactionTray.test.tsx	ReactionTray uses alignsEnd for tray-row justification and emoji-picker alignment. Tests cover incoming messages, outgoing messages placed below, and beside placement.

Priority: Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Possibly related PRs

• dev-null-sh/dev-null.sh#1101: This PR introduced the placement prop; this change updates alignment for beside placement.

Suggested reviewers: xheaven, nunomaduro

Merge Risk: Minimal · up to b945a

The alignment change is covered for incoming, outgoing, and beside placements, with no actionable merge-blocking risk identified.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Linked Issues check		Issue #1275 requires easier emoji selection. The change aligns the tray and full picker with the react-button side for incoming, outgoing, and beside placements. The added test covers these alignmen…	Change the reaction interaction so the full emoji list opens without the separate extra click, or add an equivalent implementation that satisfies the click-reduction requirement from #1275. Add a test for that interaction.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly describes the main change: positioning the reaction tray beside the react button. It is concise and specific.
Out of Scope Changes check		The pull request changes only ReactionTray alignment and adds focused unit coverage. These changes directly support issue #1275. No unrelated production behavior or unrelated files are changed.
Docstring Coverage		Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…

Full details: Docstring Coverage

Explanation

Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 1 functions across 2 files.

Full details: Linked Issues check

Explanation

Issue #1275 requires easier emoji selection. The change aligns the tray and full picker with the react-button side for incoming, outgoing, and beside placements. The added test covers these alignments. The change does not reduce the separate click required to open the full emoji list. The test only checks alignment.

Resolution

Change the reaction interaction so the full emoji list opens without the separate extra click, or add an equivalent implementation that satisfies the click-reduction requirement from #1275. Add a test for that interaction.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[arifhossen-dev]

Intentional scope: this PR fixes the pointer travel part of #1275. The second click to open the full picker is unchanged, because the quick-reaction tray (adaptive 3 emojis, then the full picker) looks like a deliberate design. Maintainers: if you'd like the react button to open the full picker directly, or the tray to show more quick reactions, I'm happy to add that here or in a follow-up PR.