Skip to content

Remove usages of `gl-xs-mb-3` CSS util

What does this MR do and why?

  • Remove extraneous bottom margin from invite modal button Removes bottom margin being applied to the invite modal's primary action button on smaller viewports. GlModal natively applies some top margin to the last button in the footer, which should be sufficient here.
  • Remove usages of gl-xs-mb-3 CSS util This replaces usages of the desktop-first gl-xs-mb-3 CSS util with mobile-first alternatives.

Screenshots or screen recordings

Invite modal

This is the only area that changes visually. I decided to drop the margin between the footer's buttons as the native margin should be sufficient.

Before After
Screenshot_2023-11-09_at_12.45.40_PM Screenshot_2023-11-09_at_12.25.17_PM

Other areas

In all other cases, the fix is essentially the same: apply the bottom margin on all viewports by default, and reset it to 0 on >=sm breakpoints. Those areas don't change visually, here are a few screenshots for reference:

Subject Mobile Desktop
app/assets/javascripts/ci/catalog/components/details/ci_resource_about.vue Screenshot_2023-11-09_at_12.38.08_PM Screenshot_2023-11-09_at_12.37.46_PM
app/assets/javascripts/notes/components/note_form.vue Screenshot_2023-11-09_at_12.39.32_PM Screenshot_2023-11-09_at_12.39.17_PM
app/views/projects/commit/_commit_box.html.haml Screenshot_2023-11-09_at_12.40.58_PM Screenshot_2023-11-09_at_12.40.45_PM
app/views/projects/find_file/show.html.haml Screenshot_2023-11-09_at_12.41.57_PM Screenshot_2023-11-09_at_12.42.08_PM

How to set up and validate locally

Those instructions are for testing the invite modal:

  1. Navigate to any project.
  2. In the navigation sidebar, click on the + icon.
  3. Click on Invite team members.

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 Paul Gascou-Vaillancourt

Merge request reports