Refine commit popover experience

Context

#561788 implemented a commit popover to give users at-a-glance information for commits without forcing users to leave the context of the page they're on.

Reference: Popovers in Source Code

From #448868 (comment 2117391060)

Popover Element Screenshot
MR popover-mr.png
Issue popover-issue.png
Epic popover-epic.png
Open MR popover openmr.png
Username popover-user.png

Design proposal

  1. Refine commit popover details

    • Increase the size of the Commit title from 12px to 14px (h5) for consistency with the MR / Issue / Epic popovers.

    • The username and commit metadata appear on different lines. Elements should be inline with each other and wrap for consistency with other popovers.

      Current Proposed

      popover.png

      Commit title is 12px

      commit popover.png

      Commit title should be an h5 (14px)

  2. Add this popover to other areas in Source Code / GitLab where the commit link appears:

    Product area Location Screen
    Source Code

    Code > Branches > User hovers over commit link

    branches.png
    Source Code

    Code > Tags > User hovers over commit link

    tags.png
    Code Review

    Merge request > User links to a commit in an MR description / comment

    mr-comment.png
    Plan

    Issues > User links to a commit in an Issue description / comment

    issues.png
    CI/CD

    Pipeline > User hovers over a commit link

    • Show commit popover

    Pipeline > User hovers over an MR

    • Show MR popover

    pipeline.png
    CI/CD

    Jobs > User hovers over a commit link

    jobs.png
    CI/CD

    Artifacts > User hovers over a commit link

    artifacts.png
Edited by Alyssa Trinh