UX Review - Button width in File Browser.

[tgeorgeux]

Description

The icon buttons along the top of the File Browser are currently set to scale their width.

Reproduce

1. Go to 'File Browser'
2. Adjust the width and watch the buttons spread out.

@kgryte brought this up at the JupyterLab Dev Meeting.

Expected behavior

It's not common in Material Design, or in JupyterLab for buttons to change shape or spacing on a resize event. @ellisonbg I wasn't around yet when this was originally designed is there a reason we chose to make those button variable-width instead of pinning them to the left side? I've thought of a couple of reasons that may have been:

• Wider buttons are easier to quickly click on.
• Discourages adding too many icons to clutter up the main bar?
• When working in a notebook, the buttons widening out makes some of them closer to the main work area.

Examples of similar button layouts that don't change size or position on resize:

• Command Palette
• Notebook Toolbar
• Running Pane
• Menu Bar

In short, I think we should treat the button similar to the notebook toolbar and pin them the left side at a set width (which we may want to keep a little wider than the notebook toolbar buttons).

Context

• Operating System and version: Any
• Browser and version: Any
• JupyterLab version: Any

[tgeorgeux]

I think we should give the buttons a max width of 32 and left align them.