Skip to content

Fix mobile layout issues in notes form

What does this MR do?

This MR fixes two layout bugs in the notes form:

  • The markdown toolbar is broken when the notes form is used in the context of the snippets page.
  • The "Toggle thread" button is misaligned.

The MR removes deeply nested CSS in favor of utility classes that target specific elements.

Screenshots or Screencasts (strongly suggested)

Screen Before After
Snippets snippets-before snippets-after
Toggle thread button toggle-thread-before toggle-thread-after
Resolve thread (unchanged) resolve-thread-before-after

Snippets notes responsive gif

2021-08-18_07.38.53

How to setup and validate locally (strongly suggested)

There are two UIs affected by this change

Snippets

  • Activate responsive design mode in your browser of choice. Simulate a small screen device.
  • Open an snippet (create one in your local environment if you haven’t yet).
  • The notes below the snippet should have a markdown toolbar with horizontally aligned buttons

Merge Requests

  • Activate responsive design mode in your browser of choice. Simulate a small screen device.
  • Open an MR
  • Open a resolvable discussion in the MR.
  • The resolve thread buttons should be unchanged.
  • The toggle thread button (when the discussion is resolved and the MR page is reloaded) should be aligned with the user’s avatar.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • 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 Enrique Alcántara

Merge request reports