fix(list): centre the sender avatar against the row - #953
Open
shukiv wants to merge 1 commit into
Open
Conversation
List rows lay out with items-start, because the sender line, subject and preview stack and the body should govern the row height. The avatar inherited that and pinned itself to the top, level with the sender line, leaving it visibly high against a two- or three-line row. Give the avatar self-center in both the single-message and thread rows. The row keeps items-start, so nothing else moves — in particular the extra-compact checkbox, which is mutually exclusive with the avatar and carries its own mt-2 offset, is untouched.
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
The sender avatar sits high in each list row rather than centred against it — level with the sender line, with the subject and preview extending below it. Most obvious at default density, where a row is three lines tall.
Cause
The row lays out with
items-start:That is correct for the row as a whole: the sender line, subject and preview stack, and the body should govern the row height. But the avatar is a sibling of that body and inherits the same alignment, so it pins to the top.
Change
Give the avatar
self-centerin both the single-message row and the thread row. The row keepsitems-start, so nothing else moves.Deliberately not switching the container to
items-center: atextra-compactdensity the avatar is not rendered and a selection checkbox takes its place, carrying its own!isFocusedMailLayout && 'mt-2'offset that is tuned foritems-start. The two are mutually exclusive, so centring only the avatar leaves that path untouched.Testing
tsc --noEmitclean;components/emailpasses (129 tests). Running on a production instance.