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.
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 |
---|---|---|
![]() |
![]() |
![]() |
- 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 adiv
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
- Align the
- 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
|
---|---|
![]() |
![]() |