fix(desktop): keep hover action bar on-screen for long-token messages#1079
Open
wesbillman wants to merge 1 commit into
Open
fix(desktop): keep hover action bar on-screen for long-token messages#1079wesbillman wants to merge 1 commit into
wesbillman wants to merge 1 commit into
Conversation
Wrap long unbreakable tokens in rendered message paragraphs so markdown content cannot widen a message row past the timeline and push the hover action bar off-screen. Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co> Signed-off-by: Wes <wesbillman@users.noreply.github.com>
wesbillman
force-pushed
the
brain/dm-reaction-bar-offscreen
branch
from
366d85e to
8372e2c
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Hovering a message whose body contains a long, unbreakable token (e.g. a long
URL) pushes the hover action bar off the right edge of the window, making
reactions/reply unreachable. Reported in #reactions-broken-in-dms.
The long token widens the message row past the timeline. The timeline clips
horizontal overflow, and the action bar is anchored to the row's right edge —
so the bar gets dragged off-screen with the row (worst seen: +157px past a
1280px window).
Fix
Add
overflow-wrap: anywhereto message paragraphs so long tokens wrap. Therow stays within the timeline and the bar stays reachable.
Verification
message-action-bar-overflow.spec.ts) asserts thebar's right edge stays inside the window at 1280/1024/900px. It fails on
main(action bar right edge off-screen at width 1280) and passes withthis change.
typecheck, lint (changed files), and the e2e test all pass.Before
Long URL overflows the row; no action bar visible on hover.
After
URL wraps; full action bar (👍 ❤️ 😂 🎉 + emoji/reply/more) renders inside the window.
(Before/after screenshots posted in #reactions-broken-in-dms.)