[Pull Request UI] Move checkout to the end avoid layout flash

[maicss]

When create a pull request, ✅ Check Out not shown, when user want click button like Copy Link, suddenly the UI refreshed, user may clicked Checkout someBranch or Rename.

[alexr00]

I think have the " (check) Checked Out" next to the "Checkout 'main'" right next to eachother makes sense. And I want to keep them first because they are the most important.

@daviddossett since you worked on this before and @hbons since this may now be your territory: The problem is that you can checkout a PR with the "Checkout" button:

At which point we go from this:

to this:

If you try to click any of the other buttons during the time between the 2nd and 3rd images then you run the risk of the misclicking once we get to the final state in image 3.

Any thoughts on how we could re-arrange this?

[hbons]

I'd like to have a look at this by rearranging items. We could separate the "Checkout" controls from the "Edit" buttons. Possibly align to GitHub a bit more. Some ideas:

Refresh could be icon only?
Rename + Refresh next to the title?

For now the other buttons could also be disabled once when in the process of checking out? Maybe the button label should also change to Checking out PR…. I'd also make the checkout button blue as this is a very important action on this page (seems it already is a bit brighter, but doesn't stand out a lot).

[alexr00]

Items have been rearranged!