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-pointeris 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 theExpandCollapseButtonso 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
- Design review feedback: !233864 (comment 3367967353)
- Figma
- Test session feedback: #598401
Screenshots or screen recordings
Desktop
| Before | After |
|---|---|
Mobile
| Before | After |
|---|---|
![]() |
![]() |
Overflow menu
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Visit any project's commit list page, e.g.
http://127.0.0.1:3000/<project>/-/commits/master - Row click: Click on a commit row that has a description — it should expand/collapse. Clicking links or buttons should not trigger expand/collapse.
- Chevron button: On desktop, confirm the expand/collapse chevron has no left border separator and sits directly next to the browse files button.
- 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





