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

css/activities.css

-  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

css/activities.css

    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

css/activities.css

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


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

css/activities.css

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


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

css/activities.css

-    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.

vanshika2720

@021nirav-blip There’s still duplicated CSS and some changes look like formatting-only (spacing/trailing spaces).
Please clean up redundant rules and keep the PR focused on the actual mobile usability fix.

github-actions · 2026-04-09T16:01:28Z

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

vanshika2720

@021nirav-blip Thanks for working on this.

Ashutoshx7 · 2026-04-09T17:47:05Z

Screencast.From.2026-04-09.23-14-40.mp4

the cards stopps adapting after a while and also take a lot of breaking changes

021nirav-blip · 2026-04-09T19:09:13Z

hi @Ashutoshx7 can you explain the error to me more clearly

Ashutoshx7 · 2026-04-09T19:11:05Z

hi @Ashutoshx7 can you explain the error to me more clearly

Welcome to music blocks card ( 37) break in your changes take closer look

021nirav-blip · 2026-04-09T19:17:35Z

@Ashutoshx7
are you refering to the break on 8th sec, on dimension 695px - 1089px, that Welcome to music blocks card move on top of that

Ashutoshx7 · 2026-04-09T19:18:24Z

@Ashutoshx7 are you refering to the break on 8th sec, on dimension 695px - 1089px, that Welcome to music blocks card move on top of that

yess

021nirav-blip · 2026-04-09T19:35:46Z

@Ashutoshx7
fixed the issue
Screencast From 2026-04-10 00-56-04.webm

github-actions · 2026-04-09T19:36:48Z

✅ 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 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

vanshika2720 suggested changes Apr 9, 2026

View reviewed changes

code clean up

2f145c9

021nirav-blip requested a review from vanshika2720 April 9, 2026 16:02

vanshika2720 approved these changes Apr 9, 2026

View reviewed changes

021nirav-blip added 2 commits April 10, 2026 00:57

fix the brekes

162c324

removes duplicate

1e8346d

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

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!

vanshika2720 left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 9, 2026

Uh oh!

vanshika2720 left a comment

Choose a reason for hiding this comment

Uh oh!

Ashutoshx7 commented Apr 9, 2026

Uh oh!

021nirav-blip commented Apr 9, 2026

Uh oh!

Ashutoshx7 commented Apr 9, 2026

Uh oh!

021nirav-blip commented Apr 9, 2026

Uh oh!

Ashutoshx7 commented Apr 9, 2026

Uh oh!

021nirav-blip commented Apr 9, 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!

021nirav-blip commented Apr 3, 2026 •

edited

Loading

021nirav-blip commented Apr 4, 2026 •

edited

Loading

Ashutoshx7 commented Apr 11, 2026 •

edited

Loading