Allow Branches button to take up full middle of toolbar because get truncated pretty early

Description

The team I working with has a convention of using branch names that follow this format: [gh-username]/[project-name]/[feature-or-fix-title], which can make for pretty long branch names.

This is especially convenient when scanning a list of branches for your current feature branch, such as in this branches tab of the GitHub.com repository with a search param for our team or project name.

The Desktop experience of working with these longer branches is a little less helpful, however – . specifically when glancing to see which branch I’m currently on, something I do frequently when I have several different feature branches in progress:

The truncation kicks in pretty early, so given our convention, I typically don’t even get to see my feature name part of the branch.

Suggestion: a floated Fetch origin button

The solution I’d like to propose is a floated (visual description, not technical implementation advice 😉) Fetch origin button that allows for the branch button (and menu dropdown) to occupy the entire full width of the toolbar. E.g.:

This would:

• allow the full branch name to be displayed for most branches, even longer ones
• put the Fetch button (which I would assume is the button most frequently clicked in the navbar) in a very familiar primary call to action location
• open up some extra breathing room in the dropdown to display full branch names there too

There may be some glaring downsides that I’m not considering, too. What might those be?

Not sure how many developers or teams of developers on GH follow a similar pattern of branch naming that produces relatively longer names. Do we have any existing data around average branch name length that might help inform us here?

cc @donokuda @nerdneha

Version

• GitHub Desktop: Version 1.1.1
• Operating system: MacOS 10.13.4

Steps to Reproduce

1. Create a branch with a very long name, for example myusername/myproject/my-new-feature-1
2. Observe that truncation in the branch button cuts off the branch name after a relatively few amount of characters.

Expected Behavior

I would expect to be able to see the entire branch name.

Actual Behavior

I cannot see the full branch name.

Additional Information

Not applicable.

Logs

Not applicable.

[cocco3]

This is still a poor user experience to have to hover over everything in a list to find what you’re looking for instead of just being able to quickly scan it.

[cocco3]

Most of my branch names are still truncated, so I didn’t even notice the menu was widened in the latest release 😃

So is there a specific reason to not allow the button and menu taking up available space?

The code below worked great for me. I also resized the app and everything looked ok. (The commented out properties are things that would have to be removed.)

#desktop-app-toolbar .toolbar-dropdown.branch-button {
    /* width: 230px; */
    flex: 1;
}

.branches-container {
    /* width: 350px; */
}

.branches-container .branches-list {
    /* width: 350px; */
}