Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: prevent layout shifts in reactions modal #270

Merged
merged 2 commits into from
Feb 13, 2024
Merged

fix: prevent layout shifts in reactions modal #270

merged 2 commits into from
Feb 13, 2024

Conversation

myandrienko
Copy link
Contributor

🎯 Goal

We got reports of layout shifts when opening the reactions modal. This PR fixes them.

🛠 Implementation details

There were two reasons for the layout shifts:

  1. Mismatch between fallback emoji size and sprite emoji size. Fixed by providing an ability to customize sprite emoji size using a CSS variable, and setting sprite emoji size to equal font size.
  2. A quick flash of the loading state inside the modal. Fixed by setting minimum height for the modal, so that in most cases it will have the same height during and after loading.

🎨 UI Changes

Screen.Recording.2024-02-13.at.15.16.16.mov

@myandrienko myandrienko merged commit e172ce1 into main Feb 13, 2024
@myandrienko myandrienko deleted the fix/reactions-modal-layout-shift branch February 13, 2024 15:31
This was referenced Feb 13, 2024
Merged
Merged
myandrienko added a commit that referenced this pull request Feb 13, 2024
@myandrienko
fix: stylelint violatiom (#271)
6f1424e 
Quick stylint violation fix after #270.
github-actions bot pushed a commit that referenced this pull request Feb 13, 2024
@semantic-release-bot
chore(release): 4.7.1 [skip ci]
4eb94ca 
## [4.7.1](v4.7.0...v4.7.1) (2024-02-13)

### Bug Fixes

* prevent layout shifts in reactions modal ([#270](#270)) ([e172ce1](e172ce1))
* stylelint violatiom ([#271](#271)) ([6f1424e](6f1424e)), closes [#270](#270)
@github-actions GitHub Actions
Copy link

🎉 This PR is included in version 4.7.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

myandrienko added a commit to GetStream/stream-chat-react that referenced this pull request Feb 21, 2024
@myandrienko
fix: prevent layout shifts in reactions modal (#2272)
706cf3d 
🚂 GetStream/stream-chat-css#270

### To-Do

- [x] Release and bump updated CSS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@szuperaz szuperaz szuperaz approved these changes

@arnautov-anton arnautov-anton arnautov-anton approved these changes

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@myandrienko @szuperaz @arnautov-anton