Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: sidepanel styling - hidden title quick fix #12077

Merged

Conversation

FernandoAscencio
Copy link
Contributor

@FernandoAscencio FernandoAscencio commented Jan 16, 2023

This commit aims to fix the issue of titles being totally occluded when the sidebar is dragged to its minimum width.

Signed-off-by: FernandoAscencio [email protected]

What it does

Fix #10666

This commit adds a min-width to .theia-sidepanel-title. Preventing the Title width from being reduced to nothing. However, this will make it so that the tabs on the right of the title will slowly disappear. Most of those commands are still accessible through the image. Seen below:
image

If this behavior is not desirable, you can change the min-width in packages\core\src\browser\style\dockpanel.css
image
This will change how small the sidepanel can get. Possibly preventing the tabs from disapearing.

From testing with VSCode, something similar must happen with their sidebar as the title for the Run and Debug menu also disappears once the sidebar is too small. This does not implement the collapsing sidebar element in VSCode.

How to test

Test should be the same as #10666.

  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 if the title is completely hidden.

Review checklist

Reminder for reviewers

Copy link
Member

@vince-fugnitto vince-fugnitto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately it does not work well, views now display incorrectly when collapsed:

bug-min-width.mp4

This commit aims to fix the issue of titles being totally occluded when
the sidebar is dragged to its minimum width.

Signed-off-by: FernandoAscencio <[email protected]>
Copy link
Member

@vince-fugnitto vince-fugnitto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works well for me 👍

@vince-fugnitto vince-fugnitto added the ui/ux issues related to user interface / user experience label Jan 17, 2023
Copy link
Contributor

@colin-grant-work colin-grant-work left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ui/ux issues related to user interface / user experience
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Styling in sidebar toolbar - widget title can be entirely hidden
3 participants