Styling in sidebar toolbar - widget title can be entirely hidden

[colin-grant-work]

Bug Description:

It is possible to drag a sidebar so that the title of the widget is totally occluded:

Wide:

Narrow:

Steps to Reproduce:

1. Open a left-area widget with icons on its sidebar (e.g. source control, search in workspace)
2. Drag the left pane to be very narrow.
3. Observe that the title is completely hidden.

In VSCode, the title can be partially occluded, but there's probably some min-width there.

Additional Information

• Operating System: MacOS
• Theia Version: d6e4971

[Antoniooov5]

hello, I just joined GitHub a few days ago and I'd like to contribute to the project you have proposed, I have only contributed to one other project but I would like to help you out if you could tell me what to do.

[colin-grant-work]

@Antoniooov5, thanks for your interest. If you would like to take on this issue, I believe that the place to start would be in this file, specifically the styles set on the theia-sidepanel-toolbar and theia-sidepanel-title classes. As noted in the description, the builtin Git view is likely the best case for reproducing the problem, as it has a large number of toolbar items.

[FernandoAscencio]

So, during my attempt to fix this I learned some things.

Edit for more context:
The way that the sidepanel seems to be handled is by having a sidepanel container with no distinguishable classes contain two objects: 1. The sidepanel toolbar and 2. the sidepanel.

The sidepanel toolbar contains the title and tabBar for quick access to other tools.
The title is not the only thing obscured in the example. There are also other tabs in the tool bar that dissapear if the width is small enough.

The easiest way to keep functionality without breaking much is by changing:

from theia\packages\core\src\browser\style\dockpanel.css

The problem is not for the left sidebar. It also happens on the right sidebar.

There are some tags (class, id) that can be styled to vary the size min-width to prevent this from happening.

1. The #theia-left-content-panel.
   
2. Anything .p-Panel, .p-Widget, .p-BoxPanel , .p-BoxPanel-child or a combination of them.
   
3. The .theia-sidepanel-toolbar, theia-left-side-panel or a combination of either.
   
4. The p-DockPanel, and anything related to it.
   

The proposed solution here affects the .p-DockPanel class via the widget (solution 4). At least that is my best guess. Seeing as it was the only value set to min-width: 100px that I could find. Also, upon testing, it behaves as expected.

A previous solution tried to affect the width via 3. Using the .theia-sidepanel-toolbar class. It did not work as upon "closing" the side-panel the

remained in place. Probably due to it having its width reduced to width: 0px instead of having the display changed to display: hidden. This caused errors seen in the comments for #12077.

Solution 2 is something I am not willing to try, as the labels .p-BoxPanel and .p-BoxPanel-child are not used for CSS anywhere in the entire application. At least, not that I could find.

Solution 1 might work, if you set up a default but it might also negatively interfere with the widget and have similar issues to 3.

The ideal solution might be to involve JS or something similar to dynamically change the min-width. Something I believe the widget takes care of, but I don't seem able to find.