Make the commit SHA on the PR page more easily selectable

[oehlschl]

Not sure if anyone else has had this experience, but for me, it's consistently difficult to select and copy the SHA for a specific commit on the PR page.

Highlighting often selects far too many HTML elements and is a painstaking task. Accordingly, I think that adding the "copy-to-clipboard" functionality (as currently exists for the branch name link on this page) next to each commit SHA would be incredibly helpful.

I expect that not everyone has this same use case, but I often need to copy SHAs from the PR page in order to interact with the git CLI locally, for cherry-picking or other inspection.

Thanks in advance!

---

(I've included a screenshot and example link from a random PR in this repo: #2472)

[jletey]

I've been wanting to start contributing to this project, so I can give this a go later this week!

[jletey]

Just forked and started implementation. You can track my progress on my copy-commit-sha branch!

[fregante]

What if instead of adding buttons (visual noise) we just add some padding around the links so that specific issue doesn’t appear? Maybe even 10px padding on the right is enough.

[jletey]

@fregante Agree with you about the buttons! Instead of adding padding, how about we make it so that if the user clicks on the commit hash, it will copy that link to the users clipboard, instead of redirecting the user to the link. How does that sound?

[fregante]

Well, no, we can't change the expected behavior if it isn't broken.

[jletey]

@fregante Oh right 🤦‍♂️

Well then, I'll start work on a feature that adds padding.

[oehlschl]

Good suggestion @fregante; thank you. I agree that a CSS change would probably work here as well and would reduce noise.

The highlighting issue I was trying to resolve should easy to replicate, and anything that fixes that will work.

I just tried locally and even ~15px of right margin is super helpful. I would however suggest margin instead of padding so that the additional space is not a clickable part of the link.

And, while I'm guessing that other people would benefit from this as well, I'm also happy to make the change using local User CSS if that's preferred. Thanks again for the suggestion.

[fregante]

PR welcome to add some padding. This is a simple CSS-only feature, the CSS can probably go in content.css

Chrome users can already copy the commit sha by right-clicking the link and selecting “Copy”: it will copy the text instead of the link. Only Firefox users don’t have this.

[oehlschl]

Chrome users can already copy the commit sha by right-clicking the link and selecting “Copy”: it will copy the text instead of the link.

Thanks @fregante! Actually didn't know that.

I don't want to motivate change if it's not necessary, so please feel free to handle this request however you see fit. Appreciate all the tips.

[maxmclau]

I added a pull request that adds the 16px of margin to the right. It seems to help quite a bit with preventing the selection overflow, but I'm sure you could come up with an even more reliable solution using some fancy user-select and :after styling.

Since it's easier to right click in Chrome, maybe this is moot anyways.