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-firstgl-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 |
---|---|
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:
How to set up and validate locally
Those instructions are for testing the invite modal:
- Navigate to any project.
- In the navigation sidebar, click on the
+
icon. - 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Paul Gascou-Vaillancourt