Unstuck bottom bar in the Perseus renderer on small mobile screens

[radinamatic]

Observed behavior

Bottom bar in the Perseus renderer (where the Check button is located) is supposed to be sticky, and not scroll up and down with the exercise when the height of the resource is bigger than the available screen space

(disregard the icons of the screencasting apps)

Android app

sticky-or-not.mp4

Browser on Android client

not-sticky-in-browser.mp4

Errors and logs

…

Expected behavior

Bottom bar should stick to the edge and not scroll with the content.

User-facing consequences

…

Steps to reproduce

…

Context

Tell us about your environment, including:

• Kolibri version: 0.15b2
• Operating system Android
• Browser all

[MisRob]

@radinamatic:

I believe the server was running on Windows 7 and I used Firefox on my Android phone (version 9) as a client to access

[radinamatic]

I just re-tested the second scenario, and the issue is extant on both Firefox and Chrome browser clients on Android when accessing the server on Windows 7, but it does depend on the exercise resource that you load: if the problem area is large enough, the bottom bar starts in the correct position, but gets pushed down once the problem area gets loaded on top.

You can use the Recognize fractions exercise in the Kolibri QA channel > Exercises > Channel based quizzes folder to replicate.

[MisRob]

Thank you @radinamatic. I was testing it on the Recognize fractions exercise. Wondering if the screen resolution may play a role here too. Could you post what was the screen resolution of your test device, please?

[MisRob]

I think the exercise was higher than the available screen space since I could scroll but maybe devices I checked so far weren't small enough for this to happen. An approximate number should be sufficient, just to have direction.

[radinamatic]

Actually, I had no idea and needed to google that 😛
https://www.gsmarena.com/motorola_moto_g6-9000.php

[MisRob]

Ah, that's perfect :) Thanks for testing it one more time and for all information.

[MisRob]

Regarding testing this issue in a browser on Android client I've still had no luck with finding a test device where I could reproduce and debug.

For the record, I tested Kolibri 0.15.0b2.dev0+git.158.g5de9da33 and the bottom bar behaved fine on the following devices:

• my Samsung Galaxy A40, Android 11, both Firefox and Chrome (recording 1)
• BrowserStack Real Devices:
  • Sony Xperia Z5, Android 5.1, Chrome
  • Xiaomi Redmi Note 7, Android 9, Firefox
  • Motorola Moto G7 Play, Android 9, Firefox
  • Motorola Moto G 2nd Gen, Android 5, Chrome (recording 2) - has the smallest screen I've discovered on BrowserStack so far, @radinamatic's testing device looks to be still smaller though
• Chrome Mobile Emulation for a very small screen (recording 3)

Samsung Galaxy A40, Android 11, Firefox	Motorola Moto G 2nd Gen, Android 5, Chrome	Chrome Mobile Emulation

[MisRob]

🎉 @bjester was able to reproduce:

Looking at the videos, it seems that it's likely caused by x-axis overflow. I was able to reproduce the issue by switching to Spanish which causes the "Get 5 correct", which is lengthier in Spanish, to push the hints anchor off the end of the header and cause viewport panning. The same also happens if you use a hint, and the hint status gets added to the bottom bar causing different overflow issues

Seems like we need some design for how to handle the hints call-to-action in a responsive manner. There's just not enough space!

[MisRob]

Confirming that I am able to reproduce this on my phone after switching to Spanish as @bjester's advised