Skip to content

Draft: GitLab UI integration branch for fix-input-height-firefox

What does this MR do and why?

fix(GlFormInput): set height of form input (gitlab-ui!3572 - merged) • Lorenz van Herwaarden • 16.3 in gitlab-ui fixes the height of GlFormInput, which was 33px on firefox/safari (while it's 32px on chrome). This change is barely noticeable in normal form inputs. Except for GlFormInputGroup because this caused a misalignment of the form and the prepend/append part. The fix in gitlab-ui also fixes these, however, there's one component where the css class gl-h-auto! was added and this causes the issue to persist. This integration MR removes this class.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screenshot_2023-07-17_at_19.54.17 Screenshot_2023-07-17_at_19.53.48
Screenshot_2023-07-17_at_19.57.36 Screenshot_2023-07-17_at_19.56.48

How to set up and validate locally

For app/assets/javascripts/groups/components/group_name_and_path.vue

For all GlFormInput

  • height is 32px on firefox and safari

For all GlFormGroupInput with GlInputGroupText append/prepend

  • the height is aligned

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Lorenz van Herwaarden

Merge request reports