Large empty space in file browser toolbar

[krassowski]

Description

Reproduce

1. Open file browser
2. Resize the sidebar to dimensions as on screenshot

Expected behavior

Space is utilised efficiently.

Context

• JupyterLab version: 4.0.0a

[JasonWeill]

On tip of master, I see the search box appear to the right of the "reload" button when the file browser is expanded to 473px wide:

At 455 px or narrower, I see it on a separate line.

[JasonWeill]

@krassowski What is the expected behavior? Do you want the search box to get progressively smaller beyond its current min. width? Should it eventually collapse to an icon, and then when the icon is clicked, it expands to allow text input?

[GabrielaVives]

When the icon is clicked, I would expect the whole panel to expand to allow space for the text box to reach its min. width. Was that what you were thinking about @JasonWeill ?

[JasonWeill]

@GabrielaVives I think that expanding the panel may be a visually jarring change. Instead, what about reducing the search/filter box to a very small size:

… then, when the user clicks on it, expand it and make the other buttons invisible, and add a collapser that makes the other buttons visible again:

[krassowski]

This seems like a good idea @JasonWeill but with a minor adjustment: because the filter stays active, collapsing it back would introduce hidden state and require us to add an indicator. So instead of ">" collapse button on the left I would suggest x on the right which would clear the filter and collapse the filter field.

[JasonWeill]

We may need both, if collapsing the filter keeps it active. (We would then have to modify the collapsed filter control to indicate that a filter is active.

[amzon-ex]

Just a minor suggestion: you could also check if the search box is empty and is focused. If empty and not in focus > collapse; in all other cases, keep it expanded until user explicitly closes it.

As another suggestion, you could keep the search box in the second row all the time, and let both the search box and the buttons take up all the space in the sidepanel (grow and shrink as required).