MR sidebar: Refactor resize handling, remove CSS
What does this MR do and why?
MR sidebar: Refactor resize handling, remove CSS
Fixes a bug on Android (Chrome) where it's impossible to edit fields on a mobile device.
The problem being, that Chrome handles the opening of the keyboard as a resize
event.
As we fire the resize
event for every single pixel, we can improve performance and
handling the issue by switching to use a ResizeObserver
instead.
There was also old CSS related to the previous sidebar (the one where it collapsed to an icon-only state) creating some unwanted layout shifts.
Problem reported by @timofurrer
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Before | After |
---|---|
How to set up and validate locally
- Open an MR on an Android device, Chrome
- Easiest is to use BrowserStack to reproduce this issue
- Open the sidebar
- Try to edit a field
- Sidebar collapses, because Android handles the keyboard opening as a
resize
event
Related to #474922
Edited by Sascha Eggenberger