Skip to content

Improved project and group home page header

Marco Zille requested to merge zillemarco/gitlab:zillemarco-improve-project-and-group-header into master

What does this MR do and why?

I noticed a small misalignment of the buttons at the right-hand side section of the projects header on the project home page.

Starting to fix that, I then noticed a different layout with the header of groups so I moved on aligning the design of the header or both groups and projects, fixing it also for smaller screens, like mobiles 🙂

During this process I also took the chance to update legacy CSS utility classes to the new GitLab UI utility mixin classes 🙂

This was the misalignment that originated this MR, literally 1 pixel and only noticeable on Windows for some reason 🤷 😅

image

Screenshots or screen recordings

Group

Screen size Before After
Mobile Schermata_2022-11-08_alle_22.57.54 Schermata_2022-11-08_alle_22.59.00
Desktop Schermata_2022-11-08_alle_22.56.59 Schermata_2022-11-08_alle_22.56.08

Project

Screen size Before After
Mobile Schermata_2022-11-08_alle_22.58.14 Schermata_2022-11-08_alle_22.58.45
Desktop Schermata_2022-11-08_alle_22.56.47 Schermata_2022-11-08_alle_22.55.47

How to set up and validate locally

Nothing special, just check projects and groups home page to see if there are any alignment or visual errors 🙂

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Marco Zille

Merge request reports