Skip to content

Sidebar's "Toggle project options" button overlaps the sidebar title "Sketch Files" when dragged to minimum width. #2698

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

Closed
Ri-Sharma opened this issue Dec 7, 2023 · 6 comments · Fixed by #2917
Labels
Area:CSS For styling or layout issues handled with CSS/SASS Area: Design For UI/UX design updates, proposals, or feedback Enhancement Improvement to an existing feature

Comments

@Ri-Sharma
Copy link
Contributor

Ri-Sharma commented Dec 7, 2023

Actual Behavior

The sidebar title "Sketch Files" gets overlapped by the sidebar "Toggle project option" button.

Screenshot 2023-12-07 215550

Expected Behavior

When dragged to minimum width it should look like this.

Screenshot 2023-12-07 221046

Steps to reproduce

Drag the sidebar to it's minimum width.

@Ri-Sharma Ri-Sharma added the Bug Error or unexpected behaviors label Dec 7, 2023
@aryanas159
Copy link
Contributor

Can I be assigned to this issue.

@lindapaiste lindapaiste added Area: Design For UI/UX design updates, proposals, or feedback Enhancement Improvement to an existing feature Area:CSS For styling or layout issues handled with CSS/SASS and removed Bug Error or unexpected behaviors labels Dec 7, 2023
@Ri-Sharma
Copy link
Contributor Author

Can I be assigned to this issue.

Hey @aryanas159 thanks for your interest, but I am currently working on this.

@lindapaiste
Copy link
Collaborator

lindapaiste commented Dec 7, 2023

I'm fine with this either way. I don't have a problem with the current overlap because it only happens if the user drags the sidebar too small, and I think it's to be expected in that case. But if we want to adjust the width I don't have a problem with that either.

Note that "Sketch Files" is a translated string, so some languages will still have an overlap even with a larger width because the text might be longer.

I checked to see what width we are using on mobile but it's half of the screen rather than a fixed pixel amount. That's enough to prevent overlap on all but the very smallest devices (<280px for English).

@Ri-Sharma
Copy link
Contributor Author

@lindapaiste yeah I forgot about the translations in other languages, and if we keep the min-width according to the language in which the "Sketch Files" length is longest it would look weird.
And I think we do not need to concern about the mobile mode because half the screen size is enough.

If we just increase the min-width to 150px from 125px (i.e. already implemented min-width) the default files will not get squashed if sidebar is dragged to min-width.
Screenshot 2023-12-07 215550

So should I proceed with this?

@lindapaiste
Copy link
Collaborator

So should I proceed with this?

@raclim do you have an opinion?

@raclim
Copy link
Collaborator

raclim commented Dec 9, 2023

@lindapaiste I don't think I have a strong leaning either way as well! I guess it wouldn't hurt to try it out!

Ri-Sharma added a commit to Ri-Sharma/p5.js-web-editor-forked that referenced this issue Dec 15, 2023
Ri-Sharma added a commit to Ri-Sharma/p5.js-web-editor-forked that referenced this issue Jan 17, 2024
@raclim raclim added this to the MINOR Release for 2.12.0 milestone Jan 19, 2024
raclim added a commit that referenced this issue Jan 25, 2024
Fix : [#2698] Change minsize 125 to 150
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area:CSS For styling or layout issues handled with CSS/SASS Area: Design For UI/UX design updates, proposals, or feedback Enhancement Improvement to an existing feature
Projects
None yet
4 participants