Commit list refactor UX fixes

What does this MR do and why?

Addresses UX feedback from the commit list refactor (design review notes). Changes based on sync discussion between @mle and @alyssatrinh.

Desktop

  • Row click to expand/collapse: Clicking anywhere on a commit row (outside links/buttons) now toggles the commit description. A cursor-pointer is shown when the commit has a description.
  • Remove left border on chevron button: Removed the grey vertical separator line next to the expand/collapse chevron on both desktop and mobile views.
  • Reduce chevron spacing: Removed the left margin (gl-ml-3) from the ExpandCollapseButton so it sits closer to the browse files button (0px gap).
  • Remove italic on empty commit message: Commit titles no longer render in italic when the commit has no message body.

Mobile

  • Display commit SHA first: Moved commit SHA to appear before the pipeline icon in the mobile badges row, and wrapped it in <code> for inline code styling.
  • Overflow ellipsis button appears rightmost: Reordered the mobile controls so the expand/collapse chevron comes before the overflow menu, ensuring the overflow button is always at the far right.
  • Remove "View commit details" menu option: Removed from the overflow dropdown since clicking the commit title already navigates to the details page. This also promotes "Copy commit SHA" to be the first action.

References

Screenshots or screen recordings

Desktop

Before After

CleanShot 2026-05-25 at 14.46.20.png

CleanShot 2026-05-28 at 10.30.50.png

Mobile

Before After
CleanShot 2026-05-25 at 14.45.42.png CleanShot 2026-05-28 at 10.30.41.png

Overflow menu

Before After
CleanShot 2026-05-25 at 14.46.00.png CleanShot 2026-05-25 at 14.43.59.png

How to set up and validate locally

  1. Visit any project's commit list page, e.g. http://127.0.0.1:3000/<project>/-/commits/master
  2. Row click: Click on a commit row that has a description — it should expand/collapse. Clicking links or buttons should not trigger expand/collapse.
  3. Chevron button: On desktop, confirm the expand/collapse chevron has no left border separator and sits directly next to the browse files button.
  4. Mobile view: Resize the browser to a narrow width:
    • Confirm the commit SHA appears first (before the pipeline icon) with inline code styling
    • Confirm the overflow button is the rightmost element
    • Open the overflow menu and confirm "View commit details" is removed

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.

Edited by Chaoyue Zhao

Merge request reports

Loading