Skip to content

Prevent "create merge request" button from overflowing on mobile

What does this MR do?

See #26556 (closed)

On the merge request page the "create merge request" button collides with the title when the viewport is less than ~525px. This causes the "create merge request" button to be pushed out of the viewport.

This MR adjusts the CSS using utility classes so the title and "create merge request" button stack at the "sm" breakpoint (576px).

How to test

  1. Navigate to the "Merge Request Page" (/dashboard/merge_requests)
  2. Set the browser viewport to < 576px

Screenshots

Before

localhost_3000_dashboard_merge_requests_assignee_username_root_iPhone_6_7_8___1_

After

localhost_3000_dashboard_merge_requests_assignee_username_root_iPhone_6_7_8_

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Peter Hegman

Merge request reports