<!--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> - [Work on this issue](https://contributors.gitlab.com/manage-issue?action=work&projectId=278964&issueIid=579130) </details> <!--IssueSummary end--> # Context Per https://gitlab.com/groups/gitlab-org/-/epics/17482#note_2611078691 the specifications for the MVC version of the Commit list are: > #### Option 1 (MVC): Use display of current mobile crud component > > Logical option for MVC, the "don't rock the boat" option. > > <table> > <tr> > <th></th> > <th>Screen</th> > <th>Notes</th> > </tr> > <tr> > <td>Default</td> > <td> > > {width=750 height=2048} > </td> > <td> > > * "Verified" badge and tag is using a smaller, mobile-friendly version of the badge (16px tall). I don't see this in Pajamas, however, we are currently using a smaller badge on mobile on the current [Commits](https://gitlab.com/gitlab-org/gitlab/-/commits/master) page. > </td> > </tr> > <tr> > <td>Interactions</td> > <td> > > {width=750 height=2682} > </td> > <td> > > * See [Issues page](https://gitlab.com/gitlab-org/gitlab/-/issues) for an example of how the crud component expands/collapses on mobile > * Clicking on the commit title will bring users to the commits detail page (see click state in blue) > </td> > </tr> > <tr> > <td>Breadcrumb overflow</td> > <td> > > {width=750 height=2048} > </td> > <td> > > * The breadcrumb will appear by default to the right of the branch selector > * If there is no more space, the breadcrumbs will fall onto a new line. > * See [Repository page](https://gitlab.com/gitlab-org/gitlab/-/tree/master) for an example of how this functions. > </td> > </tr> > </table> > # Problem * The commit hash should appear on the left-hand side in mobile, to help with scannability. * The commit hash should be styled with the `code` styling (smaller text, background color) on mobile, to help with readability. | Current | Design proposal | |---------|-----------------| | {width="317" height="534"} | {width="181" height="494"} |