Add mobile design for commit list item

What does this MR do and why?

This MR is part of bigger effort to refactor commit list. Specifically, it adds mobile view for commit list item component that matches the new 🎨 design for the commit list.

To keep MRs size in a review-able state, the implementation has been broken down into multiple MRs/issues. See implementation plan below:

Tasks MR/Issue
commit list item (collapsed state/desktop) !195517 (merged)
commit list item (collapsed state/mobile) ⬅️ this MR
commit list header #551400 (closed)
add instrumentation for expand/collapse button #547680
commit list item (expanded state) #547680
integrate with graphql #550474

References

Screenshots or screen recordings

desktop mobile
light CleanShot 2025-07-22 at 15.25.05.png CleanShot 2025-07-22 at 15.25.23.png
dark CleanShot 2025-07-22 at 15.26.58.png CleanShot 2025-07-22 at 15.27.10.png

How to set up and validate locally

  1. Enable project_commits_refactor FF
  2. Open a project
  3. Code > Commits

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Part 2 of #547678 (closed)

Edited by Chaoyue Zhao

Merge request reports

Loading