Resolve "Too much x-axis padding on the Environments Dashboard"
What does this MR do?
This MR touches a couple of class attributes in order to fix the misalignment of the UI in the environment dashboard view:
- Fix CTA text to meet Pajamas guidelines.
- Updates the bootstrap and
gl
modifier classes to fix the padding of the Environments dashboards cards. - Additionally, updates the modifier classes of the card content to fit the new values.
- Fix paddings from
15px
to16px
(computer), to meet the Pajamas spacing guidelines
- Fix paddings from
- Finally, adds
no-gutters
andml-n2
mr-n2
to the environment cards row container, which fixing the problem with the misaligned axis.
Screenshots
Note: the screenshots below were exported in @2x (captured with Devtools - Chrome Version 81.0.4044.138).
2560px
1024px
768px
425px
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec
-
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team
Closes #195692 (closed)
Edited by Rayana Verissimo