Skip to content

Improve commit message body rendering and fix responsive compare panels

The commit message body (aka description or summary) is really useful to document a change in greater detail.

Currently, it's indented inside a large block, uses a monospace font, and is very large. It feels visually inconsistent with the rest of the commit information.

Napkin_12-19-17__1.12.40_PM

We're also using this issue to to fix the responsive behavior of the merge request compare panels (detailed in https://gitlab.com/gitlab-org/gitlab-ce/issues/41283#note_68982456).

Proposal

The following proposal should update the style of commit message bodies wherever they appear in GitLab:

  • A) Repository (at top of file tree)
  • B) Repository > Commits list
  • C) Repository > Commits > Commit detail
  • D) Merge requests > Merge request detail (“Commits” tab)
  • E) CI/CD > Pipelines > Pipeline detail
  • F) New empty merge request (select source and target branches)
A, F B, D C, E
image image image
  • A, B, D, F
    • Align the .commit-actions (CI status, SHA, etc.) to the top
    • Use the horizontal ellipsis icon, similar to the icon in the breadcrumb of https://gitlab.com/gitlab-org/security-products/gemnasium
      • That breadcrumb is using the FontAwesome icon, we should use our own.
      • gitlab-svgs!95 (merged) adds the correct icon to the SVG sprite
    • Move the commit message body below the committer and timestamp
    • Remove pre, use a div or similar
    • padding-left: 8px; margin: 8px 0; white-space: pre-wrap; color: #707070; border-left: 2px solid #ccc;
    • Links should still render in color #2e2e2e
    • Commit SHA links should still render in monospaced font, using the .commit-sha class
  • C, E
    • Use default font family and font size
    • Commit SHA links should still render in monospaced font, using the .commit-sha class

Also, to fix the responsive behavior of the merge request compare panels (detailed in https://gitlab.com/gitlab-org/gitlab-ce/issues/41283#note_68982456), change the panel classes from .col-md-6 to .col-lg-6. Like so:

Current .col-md-6 Fix .col-lg-6
image image
Edited by Pedro Moreira da Silva