Repository navigation
Conversation
) Adds flex-wrap to the message header and forces the timestamp onto its own row below 480px, avoiding overlap with the username/action text on narrow viewports. Fixes RocketChat#1257
This branch has not been deployed
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.
Fixes #1257\n\n## Problem\nOn narrow screens, the message header (
\n\n## Prior art\nThis takes the same CSS approach as the earlier #1258 by @priyapathak39, which was closed unmerged due to unrelated files being included in the PR. This change is scoped to
name+userActions+timestamp) is a single non-wrapping flex row. When the combined text is wider than the viewport, the timestamp overlaps or is pushed outside the message bubble.\n\n## Fix\n- Addsflex-wrap: wrapto the header.\n- Below480px, aligns header items to the top and forces the timestamp onto its own row withflex-basis: 100%and removes its left margin.\n\nThis keeps the same visual layout on wide screens while preventing overlap on small screens.\n\n## Verification\n-yarn lintpasses (pre-existing warnings only).\n-prettier --checkpasses.\n\n## Screenshot (375px viewport)\nMessage.styles.jsonly.