fix(messages): keep delivered-icon visible on own replies (Firefox Android) (#3477)#3478
Merged
Merged
Conversation
…droid) (#3477) On narrow screens, own messages render in a flex-direction:row-reverse row. `.message-content` had `width:100%`, which consumed the entire row and squeezed the adjacent `.message-status` (delivered/sent icon) to zero width — Firefox on Android is stricter about this than desktop and dropped the icon entirely. - .message-content: width:100% -> flex:1 1 auto; min-width:0 so the column can shrink within the flex row instead of claiming all the space. - .message-status: flex-shrink:0 so the status icon can never be collapsed. Pure CSS; no behavior change on desktop. Fixes #3477. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Claude finished @Yeraze's task —— View job Pull Request Review ✅Reviewing CSS changes for Firefox Android delivered icon visibility fix. Todo List:
✅ Code Quality & Best PracticesExcellent work! The CSS changes demonstrate solid understanding of modern flexbox layout:
✅ Browser CompatibilityNo concerns identified:
✅ Bug AnalysisWell-targeted fix:
No conflicts found:
✅ Performance ConsiderationsMinimal performance impact:
✅ Security AssessmentNo security implications - CSS changes only affect visual layout. ✅ Test CoverageAppropriate for CSS-only changes:
🎯 SummaryThis is a high-quality, surgical fix that addresses a specific browser compatibility issue without affecting desktop or other mobile browsers. The solution demonstrates good understanding of flexbox mechanics and follows established patterns in the codebase. Recommendation: ✅ Approve and merge The fix is minimal, well-documented, and correctly targets the root cause. Manual testing on Firefox Android would be ideal to confirm the visual fix, but the technical approach is sound. |
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.
Summary
Fixes #3477 — on Firefox Android, the delivered/sent status icon was invisible on your own replies to public messages.
Root cause: own messages render in a
flex-direction: row-reverserow..message-contenthadwidth: 100%, which consumed the entire row on narrow screens and squeezed the adjacent.message-statuselement to zero width. Firefox on Android enforces this more strictly than desktop browsers, so the icon disappeared.Fix (pure CSS):
.message-content(nodes.css):width: 100%→flex: 1 1 auto; min-width: 0so the column shrinks within the flex row instead of claiming all the space..message-status(messages.css): addflex-shrink: 0so the status icon can never be collapsed.No behavior change on desktop.
Provenance note
A prior AI-generated branch (
claude/great-dijkstra-8o9zpr) proposed this same CSS but was cut from a stale main and also bundled an obsoleteserver.tschange — addingstatusmessage/trafficmanagementto avalidModuleTypesarray that main already handles and has since refactored away (via #3465). This PR is the clean CSS-only fix rebased on currentmain, dropping that dead hunk.Testing
tsc --noEmitclean..message-content/.message-statusoverrides elsewhere (the only other rule is an unrelated highlight animation). Visual confirmation on Firefox Android recommended at review.🤖 Generated with Claude Code