Adjust gutter logic for smaller viewports and alignment

Austin Regneryrequested to merge
aregnery/set-dynamic-gutter-sizing into master

What does this MR do and why?

Adjust gutter logic for smaller viewports and vertical visual alignment with the top-bar. The noticeable change starts at the lg breakpoint.

References

https://gitlab.com/gitlab-org/gitlab/-/issues/564999#note_2781117668

Screenshots or screen recordings

Viewport size Before After
xs (<576px) 127.0.0.1_3000_gitlab-org_gitlab-test (12).png 127.0.0.1_3000_gitlab-org_gitlab-test__1_
sm (>=576px) 127.0.0.1_3000_gitlab-org_gitlab-test (11).png 127.0.0.1_3000_gitlab-org_gitlab-test__2_
md (>=768px) 127.0.0.1_3000_gitlab-org_gitlab-test (10).png 127.0.0.1_3000_gitlab-org_gitlab-test__3_
lg (>=992px) 127.0.0.1_3000_gitlab-org_gitlab-test (9).png 127.0.0.1_3000_gitlab-org_gitlab-test__4_
xl (>=1200px) 127.0.0.1_3000_gitlab-org_gitlab-test (8).png 127.0.0.1_3000_gitlab-org_gitlab-test__5_
127.0.0.1_3000_gitlab-org_gitlab-test (7).png 127.0.0.1_3000_gitlab-org_gitlab-test (6).png

How to set up and validate locally

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Austin Regnery

Merge request reports