Skip to content

Remove alignment rule for header actions

Paulina Sedlak-Jakubowska requested to merge refactor-header-actions-alignment into master

What does this MR do and why?

Remove alignment rule for header actions

All current occurrences of detail-page-header-actions use a utility class that overwrites this rule, hence removing custom CSS rule that is unnecessary.

Changelog: other

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After Classes used before

before vulnerability.png

after vulnerability.png

class="detail-page-header-actions gl-display-flex gl-flex-wrap gl-gap-3 align-items-center"

Screenshot of snippet title with action buttons before changes

Screenshot of snippet title with action buttons after changes

class="detail-page-header-actions gl-align-self-start"

Screenshot of issue title with action buttons before changes

Screenshot of issue title with action buttons after changes

class="detail-page-header-actions gl-display-flex gl-align-self-start gl-sm-gap-3"

Screenshot of mileston title with action buttons before changes

Screenshot of milestone title with action buttons after changes

.milestone-buttons.detail-page-header-actions.gl-display-flex.gl-align-self-start

Screenshot of merge request title with action buttons before changes

Screenshot of merge request title with action buttons after changes

.detail-page-header-actions.gl-align-self-start.is-merge-request.js-issuable-actions.gl-display-flex

Screenshot of epic title with action buttons before changes

Screenshot of test case title with action buttons before changes

Screenshot of epic title with action buttons after changes

Screenshot of test case title with action buttons after changes

class="detail-page-header-actions gl-display-flex"

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Make sure you have access to EE features (Epics)
  2. Go to the following views and make sure the buttons next to the page title are aligned the same as before:
    1. http://127.0.0.1:3000/flightjs/Flight/-/snippets/21 (see how to create a snippet)
    2. http://127.0.0.1:3000/flightjs/Flight/-/issues/10
    3. http://127.0.0.1:3000/flightjs/Flight/-/milestones/8#tab-issues
    4. http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/3
    5. http://127.0.0.1:3000/groups/flightjs/-/epics/5
    6. http://127.0.0.1:3000/flightjs/Flight/-/quality/test_cases/42 (see how to create a test case)
    7. http://127.0.0.1:3000/flightjs/Flight/-/security/vulnerabilities/206

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 Paulina Sedlak-Jakubowska

Merge request reports