Fix Android mobile usability (#4991) by 021nirav-blip · Pull Request #6481 · sugarlabs/musicblocks

021nirav-blip · 2026-04-03T15:14:50Z

What changed:

Help sidebar now collapses with a toggle
Responsive breakpoints (768/480/320px)
Bigger touch targets (44px min)
Click outside help to close
Wheel nav scales with screen size
Canvas fills full width on mobile
Works with both legacy and new help systems

Fixes #4991 — Android navigation was rough, blocks were huge, sidebar never went away.

PR Category

github-actions · 2026-04-03T15:15:57Z

✅ All Jest tests passed! This PR is ready to merge.

Chaitu7032 · 2026-04-03T16:11:51Z

Thanks for the Android usability improvements

Requesting changes due to some correctness and maintainability concerns: help visibility mixes inline styles and classes, making state inconsistent. The document-level outside-click handler is added unconditionally and may affect desktop behavior.

And also CSS breakpoints overlap and the desktop min-width: 769px override is too broad, potentially forcing help visible unintentionally

And one last

Please simplify visibility handling (single mechanism), scope click handling to mobile, refine breakpoints, and add type="button" to the toggle.

vyagh · 2026-04-03T16:14:39Z

-  background-color: #e0e0e0;
-  color: black;
+    border: none;
+    border-radius: 4px;


why these spaces?

don't you think you removed the lines, and added them again with just trailing spaces?

vyagh · 2026-04-03T16:15:29Z

    height: 64px;
    width: 100%;
-    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
+    box-shadow:


you just re-wrote the same line, don't you think?

vyagh · 2026-04-03T16:15:50Z

    height: 28px;
    filter: invert(100%);
-    transition: background-color 0.3s, filter 0.3s;
+    transition:


vyagh · 2026-04-03T16:16:17Z

-    /* 1. Fit the screen width */
-    width: 90% !important;
+    #helpDiv {
+        /* 1. Fit the screen width */


vyagh · 2026-04-03T16:16:28Z

-    transform: translateX(-50%);
-    /* Moves it back by half its width to center it */
+        /* 2. Center Horizontally */
+        left: 50% !important;


vyagh · 2026-04-03T16:17:35Z

mobile responsiveness is good, but keep the diffs less so its easy to review, thanks!

021nirav-blip · 2026-04-03T17:27:24Z

@vyagh Yeah, you're right — sorry about the messy diff. I threw in a bunch of unnecessary formatting (extra spaces, rewriting lines, duplicate comments) that just gets in the way.
I'll send a clean version with only the mobile styles. No cosmetic noise.
Thanks for the catch.

github-actions · 2026-04-03T17:55:56Z

✅ All Jest tests passed! This PR is ready to merge.

github-actions · 2026-04-03T18:04:13Z

✅ All Jest tests passed! This PR is ready to merge.

Chaitu7032 · 2026-04-04T02:06:07Z

As I check Desktop CSS override is too broad .

Avoid forcing display: block !important , it looks aggressive .

Because it can override intended hidden states in desktop layouts. If any feature depends on hiding that widget , this could silently break it.

My suggestion -

Scope the rule to a more specific state
Or rely on existing state classes instead of overriding them.

Eg:

@media screen and (min-width: 769px) { .widget-window[data-widget-type='help'].is -open { position: relative; transform: none; } }

Rest everything LGTM

github-actions · 2026-04-04T08:53:32Z

✅ All Jest tests passed! This PR is ready to merge.

021nirav-blip · 2026-04-04T08:54:58Z

@Chaitu7032 Good catch — that desktop override was way too aggressive.

Fixed it:

Before: display: block !important (forced visible everywhere)
After: display: block !important only when .is-open is present

So now it won't break existing hidden states, only affects explicitly opened help widgets. Much safer.
Staged and ready. Thanks for catching that.

vyagh · 2026-04-06T05:18:30Z

a video attachment would have been great to showcase the improvement.

021nirav-blip · 2026-04-06T18:11:49Z

Screencast From 2026-04-06 23-11-42.webm
@vyagh

What changed: - Help sidebar now collapses with a toggle - Responsive breakpoints (768/480/320px) - Bigger touch targets (44px min) - Click outside help to close - Wheel nav scales with screen size - Canvas fills full width on mobile - Works with both legacy and new help systems Fixes sugarlabs#4991 — Android navigation was rough, blocks were huge, sidebar never went away.

- Collapsible help sidebar with toggle - Responsive breakpoints at 768/480/320px - Touch targets now 44px min - Click outside help to close - Wheel nav scales to screen size - Canvas full width on mobile - Supports both legacy and new help systems - Cleaned up formatting: combined split CSS, removed duplicate comments - Added css/activities.css to .prettierignore Fixes sugarlabs#4991 — Android navigation was rough, sidebar never went away, blocks were huge.

What changed: - Collapsible help sidebar with toggle (mobile only) - Responsive breakpoints at 768/480/320px - 44px touch targets, click outside to close (mobile) - Scaled wheel nav, full-width canvas - Supports both help systems - Classes-only visibility (no inline styles) - Added type=button, fixed overlapping breakpoints - Added activities.css to .prettierignore Fixes sugarlabs#4991 (Android navigation issues, always-visible sidebar) Clean diffs: single visibility mechanism, mobile-only handlers, proper semantics.

github-actions · 2026-04-09T15:31:02Z

✅ All Jest tests passed! This PR is ready to merge.

github-actions · 2026-04-09T19:49:59Z

✅ All Jest tests passed! This PR is ready to merge.

Ashutoshx7 · 2026-04-09T20:43:52Z

Screencast.From.2026-04-10.02-12-11.mp4

@walter your thoughts ?

github-actions · 2026-04-10T13:55:33Z

✅ All Jest tests passed! This PR is ready to merge.

walterbender · 2026-04-11T13:07:29Z

I am struggling with this a bit: (1) I don't know what the big ? that appear on the left of the screen is supposed to do. When I click on it, it doesn't seem to do anything; (2) When I click on the help button, it brings up the help widget but I cannot get the widget to dismiss.

github-actions · 2026-04-11T13:28:14Z

✅ All Jest tests passed! This PR is ready to merge.

…inicky—either the widget wouldn't pop up at all, or it'd get stuck and you couldn't close it. It should toggle properly now

github-actions · 2026-04-11T14:26:49Z

✅ All Jest tests passed! This PR is ready to merge.

021nirav-blip · 2026-04-11T14:28:13Z

@walterbender Got both of these handled. To answer your questions:

The big "?" button is just the mobile toggle. It only shows up when the screen is narrower than 768px because the normal sidebar is too bulky for phones. One tap opens the help, and another tap hides it.

I also fixed the dismissal issues. It'll close now if you hit the button again or if you just tap outside the widget. It should be much less finicky now—give it a try on your phone and let me know if it's still acting up.

Ashutoshx7 · 2026-04-11T14:35:36Z

just a quick thought
musicblock is a desktop application
cand so hildren use musicblocks on the laptop

and also i went to the official https://musicblocks.sugarlabs.org/

Screencast.From.2026-04-11.20-02-36.mp4

i feel its optimized enough

github-actions · 2026-04-12T16:21:36Z

✅ All Jest tests passed! This PR is ready to merge.

github-actions · 2026-04-15T11:59:15Z

✅ All Jest tests passed! This PR is ready to merge.

walterbender · 2026-04-15T15:14:09Z

The button is responsive now and does toggle help. But I am still a bit confused. The toolbar button is available, so why the extra button? And does that button always stay visible?

021nirav-blip · 2026-04-15T16:35:03Z

@walterbender - glad it’s working!

The reason for the two buttons is mostly about screen space. Centered modals are miserable on phones, so I added the blue "?" button to trigger a slide-in sidebar instead. It takes up about 80% of the screen, which is way easier to read on a small device.

It’s responsive, so it only pops up when the screen is 768px or narrower—the same way the "Play only mode" message works. If you resize your desktop browser, you'll see it disappear.

I figured this kept the help accessible without crowding the main toolbar on mobile. Let me know if that logic feels right or if you'd rather I change it.

walterbender · 2026-04-15T16:35:50Z

I understand that it is responsive. But it seems to always be on the screen for mobile, which takes up valuable screen real estate on a small device.

021nirav-blip · 2026-04-15T16:48:21Z

@walterbender -
What about:
Auto-hide on scrol : disappears when scrolling down, back when scrolling up. Pretty standard.
Collapsible toolbar: hide it behind a "more options" tap area.
Smaller button : 50px is big. 36px or just an icon with no background?
Contextual visibility : show on first visit, then move to a collapsed menu.

walterbender · 2026-04-15T16:52:56Z

Let's discuss with Devin.

021nirav-blip · 2026-04-15T16:57:29Z

sounds good

github-actions · 2026-04-15T16:58:54Z

✅ All Jest tests passed! This PR is ready to merge.

github-actions · 2026-04-18T19:09:25Z

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Coverage: Statements: 41.87% | Branches: 34.76% | Functions: 46.52% | Lines: 42.28%

Failed Tests:

phrasemaker.test.js

github-actions · 2026-04-20T09:44:48Z

✅ All Jest tests passed! This PR is ready to merge.

Coverage: Statements: 43.27% | Branches: 35.53% | Functions: 47.74% | Lines: 43.7%

github-actions Bot added bug fix Fixes a bug or incorrect behavior size/L Large: 250-499 lines changed area/javascript Changes to JS source files area/css Changes to CSS/SASS style files area/core Changes to core app entry files labels Apr 3, 2026

021nirav-blip mentioned this pull request Apr 3, 2026

Issue in opening website on Andriod #4991

Open

021nirav-blip marked this pull request as ready for review April 3, 2026 15:18

vyagh suggested changes Apr 3, 2026

View reviewed changes

021nirav-blip requested a review from vyagh April 3, 2026 17:57

vyagh approved these changes Apr 6, 2026

View reviewed changes

021nirav-blip requested a review from vyagh April 6, 2026 18:17

021nirav-blip closed this Apr 9, 2026

021nirav-blip reopened this Apr 9, 2026

021nirav-blip added 4 commits April 9, 2026 20:59

css aggressive code resolve

4280e2c

021nirav-blip force-pushed the solve-issue-website-on-android branch from b74c74d to 4280e2c Compare April 9, 2026 15:30

021nirav-blip closed this Apr 9, 2026

021nirav-blip reopened this Apr 9, 2026

Merge branch 'master' into solve-issue-website-on-android

b52c3a3

Merge branch 'sugarlabs:master' into solve-issue-website-on-android

0e93ba0

Merge branch 'sugarlabs:master' into solve-issue-website-on-android

eda183c

Fixed the blue help button to actually work on mobile. It was being f…

a50b3ad

…inicky—either the widget wouldn't pop up at all, or it'd get stuck and you couldn't close it. It should toggle properly now

Merge branch 'sugarlabs:master' into solve-issue-website-on-android

8328509

Merge branch 'sugarlabs:master' into solve-issue-website-on-android

0cc0f21

Merge branch 'sugarlabs:master' into solve-issue-website-on-android

7839456

Merge branch 'sugarlabs:master' into solve-issue-website-on-android

bbb4825

Merge branch 'sugarlabs:master' into solve-issue-website-on-android

b4a9d64

Uh oh!

Conversation

021nirav-blip commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 3, 2026

Uh oh!

Chaitu7032 commented Apr 3, 2026

Uh oh!

vyagh Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

vyagh Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

vyagh Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

vyagh Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

vyagh Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

vyagh Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

vyagh commented Apr 3, 2026

Uh oh!

021nirav-blip commented Apr 3, 2026

Uh oh!

github-actions Bot commented Apr 3, 2026

Uh oh!

github-actions Bot commented Apr 3, 2026

Uh oh!

Chaitu7032 commented Apr 4, 2026

Uh oh!

github-actions Bot commented Apr 4, 2026

Uh oh!

021nirav-blip commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vyagh commented Apr 6, 2026

Uh oh!

021nirav-blip commented Apr 6, 2026

Uh oh!

github-actions Bot commented Apr 9, 2026

Uh oh!

github-actions Bot commented Apr 9, 2026

Uh oh!

Ashutoshx7 commented Apr 9, 2026

Uh oh!

github-actions Bot commented Apr 10, 2026

Uh oh!

walterbender commented Apr 11, 2026

Uh oh!

github-actions Bot commented Apr 11, 2026

Uh oh!

github-actions Bot commented Apr 11, 2026

Uh oh!

021nirav-blip commented Apr 11, 2026

Uh oh!

Ashutoshx7 commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 12, 2026

Uh oh!

github-actions Bot commented Apr 15, 2026

Uh oh!

walterbender commented Apr 15, 2026

Uh oh!

021nirav-blip commented Apr 15, 2026

Uh oh!

walterbender commented Apr 15, 2026

Uh oh!

021nirav-blip commented Apr 15, 2026

Uh oh!

walterbender commented Apr 15, 2026

Uh oh!

021nirav-blip commented Apr 15, 2026

021nirav-blip commented Apr 3, 2026 •

edited

Loading

021nirav-blip commented Apr 4, 2026 •

edited

Loading

Ashutoshx7 commented Apr 11, 2026 •

edited

Loading