Skip to content

MR sidebar: Refactor resize handling, remove CSS

Sascha Eggenberger requested to merge mr-sidebar-android-issue into master

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
before after

How to set up and validate locally

  1. Open an MR on an Android device, Chrome
    1. Easiest is to use BrowserStack to reproduce this issue
  2. Open the sidebar
  3. Try to edit a field
  4. Sidebar collapses, because Android handles the keyboard opening as a resize event

Related to #474922

Edited by Sascha Eggenberger

Merge request reports

Loading