<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=589643) </details> <!--IssueSummary end--> # Context https://gitlab.com/gitlab-org/gitlab/-/work_items/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. <details> <summary> ##### Reference: Popovers in Source Code </summary> From https://gitlab.com/gitlab-org/gitlab/-/issues/448868#note_2117391060 | Popover Element | Screenshot | |-----------------|------------| | [MR](https://gitlab.com/gitlab-com/www-gitlab-com/-/merge_requests/136006) | {width="288" height="151"} | | [Issue](https://gitlab.com/gitlab-org/gitlab/-/issues/448868) | {width="282" height="151"} | | [Epic](https://gitlab.com/groups/gitlab-org/-/epics/8075) | {width="219" height="132"} | | [Open MR popover](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/CODEOWNERS) | {width="410" height="326"} | | [Username](https://gitlab.com/mcbabin) | {width="299" height="179"} | </details> # Design proposal 1. Refine commit popover details * Increase the size of the Commit title from 12px to 14px (h5) for consistency with the [MR](https://gitlab.com/gitlab-com/www-gitlab-com/-/merge_requests/136006) / [Issue](https://gitlab.com/gitlab-org/gitlab/-/issues/448868) / [Epic](https://gitlab.com/groups/gitlab-org/-/epics/8075) popovers. * The username and commit metadata appear on different lines. Elements should be inline with each other and wrap for consistency with other popovers. <table> <tr> <th>Current</th> <th>Proposed</th> </tr> <tr> <td> {width="228" height="138"} Commit title is 12px </td> <td> {width="296" height="120"} Commit title should be an h5 (14px) </td> </tr> </table> 2. Add this popover to other areas in Source Code / GitLab where the commit link appears: <table> <tr> <th>Product area</th> <th>Location</th> <th>Screen</th> </tr> <tr> <td>Source Code</td> <td> Code \> Branches \> User hovers over commit link </td> <td> {width="900" height="515"} </td> </tr> <tr> <td>Source Code</td> <td> Code \> Tags \> User hovers over commit link </td> <td> {width="900" height="461"} </td> </tr> <tr> <td>Code Review</td> <td> Merge request \> User links to a commit in an MR description / comment </td> <td> {width=900 height=361} </td> </tr> <tr> <td>Plan</td> <td> Issues \> User links to a commit in an Issue description / comment </td> <td> {width="652" height="107"} </td> </tr> <tr> <td>CI/CD</td> <td> Pipeline \> User hovers over a commit link * Show commit popover Pipeline \> User hovers over an MR * Show MR popover </td> <td> {width="900" height="574"} </td> </tr> <tr> <td>CI/CD</td> <td> Jobs \> User hovers over a commit link </td> <td> {width="755" height="600"} </td> </tr> <tr> <td>CI/CD</td> <td> Artifacts \> User hovers over a commit link </td> <td> {width="748" height="600"} </td> </tr> </table>