It's unclear which branch is being merged into another in the merge dialog

The directional merge flow is not as obvious as it could be. It should be perfectly clear which branch you’re merging into which branch.

⚠️ See #5555 for additional context ⚠️

This issue is marked as help wanted to gives others the chance to get involved in feature iteration.

Current Merge Dialog Note that we are merging git-store-cache into master.

Goal

We want to make it clearer what branch will be merged into another.

Proposed Solution

Make two changes:

1. use the title of the dialog to state what branch is being merged and the direction it’s being merged
2. Move the conflicts hint above the Merge button

Mockup

Risks

• Branch names can be an arbitrary length, so it’s worth thinking about how to present a longer branch names in a fixed width window.

The CSS that controls the ellipsis is located here: https://github.com/desktop/desktop/blob/19d5fdd4621c6147979c3ac3fdbc77c89d8d4d6a/app/styles/ui/_branches.scss#L204-L217 for some prior art in that area.

[JQuinnie]

Hi, I’d like to take a stab and work on this issue, thanks!

[tierninho]

Maybe this issue should be addressed here too? https://github.com/desktop/desktop/issues/5970

Secondly, should we edit the merge hint text “This branch is up to date with…” with the actual branch name? It will match our other iterations. This is in regards to https://github.com/desktop/desktop/blob/aa99aa3aceba96f3b8b9e793334b9c9346dc17ec/app/src/ui/merge-branch/merge.tsx#L183