Skip to content

Adjust left and right visual margin on boards

Chad Lavimoniere requested to merge 450757-trigger-button-right-padding into master

What does this MR do and why?

Makes the left and right visual margin on board content and board top bar content match the margins used globally for content.

MR acceptance checklist

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

Screenshots or screen recordings

With epic swim lanes:

Size Before After

xs (400px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (22).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (23).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (24).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (19).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (20).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (21).png

sm (600px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (25).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (26).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (27).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root.png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (1).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (2).png

md (800px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (28).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (29).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (30).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (3).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (4).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (5).png

lg (1000px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (31).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (32).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (33).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (6).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (7).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (8).png

xl (1300px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (34).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (35).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (36).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (9).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (10).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (11).png

No epic swim lanes:

Size Before After

xs (400px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (12).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (13).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (14).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (16).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (17).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (18).png

sm (600px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (15).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (16).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (17).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (13).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (14).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (15).png

md (800px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (18).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (19).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (20).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (10).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (11).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (12).png

lg (1000px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (21).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (22).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (23).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (9).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (7).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (8).png

xl (1300px)

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (24).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (25).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root (26).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (3).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (4).png

gdk.test_3000_flightjs_Flight_-_boards_1_assignee_username=root&group_by=epic (5).png

How to set up and validate locally

  1. Check out this branch
  2. Visit an issue board in the GDK
  3. Check the alignment of the left edge; the breadcrumb, first item in the board top bar (the board switcher dropdown) and the first column should all be visually aligned.
  4. Scroll all the way to the right
    • you will see that the right edge of the new list button is aligned with the right edge of the duo chat callout button in the header
  5. turn on grouping by epic
  6. Check the alignment of the left edge; the breadcrumb, first item in the board top bar (the board switcher dropdown) and the first column should all be visually aligned.
  7. Scroll all the way to the right
    • you will see that the right edge of the new list button is aligned with the right edge of the duo chat callout button in the header

Related to #450757 (closed)

Edited by Chad Lavimoniere

Merge request reports