bug: On smaller devices(tablets, mobiles), there isn't any way to change the visibility(public/private) of a sketch.
p5.js version
1.11.10
What is your operating system?
None
Web browser and version
Brave : 1.83.118 Chromium: 141.0.7390.108 (Official Build) (64-bit)
Actual Behavior
The /sketches page is not responsive. On smaller devices like mobile phones, tablets, iPads, the visibility of the sketch can't be changed since the option is hidden from the main list, and isn't included in the menu. So, the user is not able to switch the visibility between public and private.
In larger screens :
In smaller screens:
Expected Behavior
The The /sketches page should be responsive to all devices. On smaller devices like mobile phones, tablets, iPads, the context-menu should include an option to change the visibility(private/public), so that user can easily switch between private and public sketch.
Steps to reproduce
Steps:
- Go to the p5.js web editor(default page, i.e.
https://editor.p5js.org/<your_username>/sketches). - Observe the sketches list, you'll find an option to change visibility on larger screens.
- Switch to smaller screens, or open the same page in smaller devices, you won't find any such option.
On smaller screens, the /sketches page hides the visibility toggle because <VisibilityDropdown> is inside
<td hidden={!userIsOwner || mobile}>
As a result, users cannot change a sketch’s visibility on mobile.
Fix: Add a mobile-only MenuItem inside the dropdown menu to toggle visibility:
<MenuItem hideIf={!userIsOwner || !mobile} onClick={toggleVisibilityFromMenu}>
{isPublic ? t('SketchList.MakePrivate') : t('SketchList.MakePublic')}
</MenuItem>
This restores the ability to change visibility on all devices.
Thanks so much for opening this @Himanshu-9977 and for your solution @NisargJasani0602! The solution makes sense to me—would you be interested in working on this @NisargJasani0602?
Yes, I would love to work on this issue!
Sounds good, just assigned!
Hi! I noticed this issue is still unresolved and the PR hasn’t been merged yet. If the previous assignee is inactive, could you please assign this to me? I’d love to work on fixing the /sketches page responsiveness
I have made the necessary changes and it is working on my end, only the PR has to be merged, once approved and verified by @raclim