Fixed alignment of typing indicator in chat composite by changing flexFlow to column-reverse#1297
Conversation
prabhjot-msft
requested review from
JamesBurnside,
PorterNan,
alkwa-msft,
anjulgarg,
carocao-msft,
dmceachernmsft,
edwardlee-msft,
mgamis-msft and
prprabhu-ms
as code owners
|
Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot. |
1 similar comment
|
Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot. |
| */ | ||
| export const typingIndicatorContainerStyle = mergeStyles({ | ||
| minHeight: '2.125rem' | ||
| minHeight: '0.125rem' |
There was a problem hiding this comment.
The min-height is actually there to prevent the messages from shifting up and down when a typing indicator appears (this css line should have a comment to make that clear).
e.g. without the minHeight, when a typing indicator appears and disappears it causes the messages to shift up and down:
Is it possible to keep the minHeight and instead align the text (vertically) to the bottom or center of the container so it is not so far away from the edit box?
JamesBurnside
left a comment
JamesBurnside
left a comment
There was a problem hiding this comment.
Want to check if we can keep the min height or not
…xFlow to column-reverse
prabhjot-msft
changed the title
We can keep the min height and align the text to bottom by changing flexFlow to column-reverse, let me know if that works. |
| minHeight: '2.125rem' | ||
| minHeight: '2.125rem', | ||
| // flexFlow set to column-reverse to align the text to the bottom of the container | ||
| flexFlow: 'column-reverse' |
There was a problem hiding this comment.
because flex boxes have a wide variety of css properties that are hard to dissociate from each other (and because when changing css its incredibly hard to ensure no other properties are affected) we want to avoid writing css as much as possible.
Instead we want to use a semantic driven approach and use Fluent's Stack
These have properties like horiztonal and align=end to avoid having to write css and have a semantical-driven approach to how components are laid out that very readable&understandable.
Instead can you do something like:
? (not sure if the alignment should be 'baseline' or 'end')
If not keep this as is!
There was a problem hiding this comment.
flex layout is taking precedence over the properties thus vertical align is not working in this case. The other property that we can change is justifyContent='end' which is again property to flex layout. So, I am going to use column-reverse in this case.
JamesBurnside
left a comment
JamesBurnside
left a comment
There was a problem hiding this comment.
Just a suggestion on avoid css, otherwise this is great!
4 participants
What
Fixed alignment of typing indicator in chat composite by changing flexFlow to column-reverse
Why
https://skype.visualstudio.com/SPOOL/_workitems/edit/2662655
How Tested
Manually
Process & policy checklist
Is this a breaking change?