Set gutter to be 8px below lg breakpoint

Austin Regneryrequested to merge
aregnery/tweak-gutter-logic into master

What does this MR do and why?

This change adjusts the spacing and layout of various UI elements across the application. The main updates include reducing left padding on panel content areas, making the spacing more consistent between different screen sizes, and slightly decreasing the offset distance for anchor links in headings.

References

Related #578912 (closed) !210817 (closed)

Screenshots or screen recordings

Project Overview

Viewport size Before After
xs (<576px) 127.0.0.1_3000_gitlab-duo_test__3_ 127.0.0.1_3000_gitlab-duo_test.png
lg (>=992px) 127.0.0.1_3000_gitlab-duo_test (6).png 127.0.0.1_3000_gitlab-duo_test (1).png
xl (>=1200px) 127.0.0.1_3000_gitlab-duo_test__5_ 127.0.0.1_3000_gitlab-duo_test__2_

Issue

Viewport size Before After
xs (<576px) 127.0.0.1_3000_gitlab-duo_test_-issues_1__5 127.0.0.1_3000_gitlab-duo_test_-_issues_1
lg (>=992px) 127.0.0.1_3000_gitlab-duo_test_-issues_1__4 127.0.0.1_3000_gitlab-duo_test_-issues_1__1
xl (>=1200px) 127.0.0.1_3000_gitlab-duo_test_-issues_1__3 127.0.0.1_3000_gitlab-duo_test_-issues_1__3

Anchor

Viewport size Before After
xl (>=1200px) CleanShot_2025-10-30_at_13.32.59_2x CleanShot_2025-10-30_at_13.31.16_2x

How to set up and validate locally

  1. Adjust screen size across breakpoints
  2. Check header anchor position on xl breakpoint

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