oppia: [BUG]: content overflow on mobile lesson cards after popup

Describe the bug

When scrolling on the lesson card after closing the popup, some of the card content appears cut off horizontally. This makes the concepts, hints or solutions difficult to read on mobile.

URL of the page where the issue is observed.

https://www.oppia.org/explore/K645IfRNzpKy?story_url_fragment=jaimes-adventures-in-arcade&topic_url_fragment=place-values&classroom_url_fragment=math&node_id=node_1#input-response-pair-3

Steps To Reproduce

```
Start a lesson on mobile device
```
```
Trigger a popup (prompt, hint,)
```
```
Dismiss the popup
```
```
Scroll on the lesson card
```

Expected Behavior

The lesson card contents should reflow appropriately in mobile view after the popup is triggered and dismissed. All concepts, hints and solutions should be readable without horizontal overflow issues.

Screenshots/Videos

497e9f08-dae1-45f6-a6ae-84a969620eee

What device are you using?

Mobile

Operating System

Android, IOS

What browsers are you seeing the problem on?

Chrome, Safari

Browser version

No response

Additional context

Possible Fix:

Investigate making the lesson cards responsive to account for dynamic popup interactions. Check container sizes and re-layout components after popup dismiss. Consider using relative units like percentage over fixed pixels.

Tips for developers

Before tackling the bug, please use git bisect (see https://git-scm.com/docs/git-bisect) to investigate which PR caused it (you only need to go back as far as commit https://github.com/oppia/oppia/commits/9a334e9). If you find the PR, leave a comment on this issue pointing to it, or just say that it happened before commit 9a334e9 if you could reproduce it there. This will help us fix the issue by reverting the faulty PR.

Also, if this is your first issue, please make sure to follow https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue and https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up before claiming it. Thanks!

About this issue

Original URL
State: open
Created 8 months ago
Comments: 32 (21 by maintainers)

Most upvoted comments

Sure @seanlip I will be more than happy to collaborate with @OnolexTim

DhairyaMajmudar on Nov 20, 2023

I think you all might not be testing the same thing as each other.

@OnolexTim – are you testing on a mobile device browser? If so, do you have access to a desktop/laptop and do you also see issues there (or does this only happen on a mobile device)?

@DhairyaMajmudar I think you are testing with Chrome DevTools. Sometimes not all mobile issues will show up in DevTools (e.g. notice that no keyboard pops up on your screen). Here’s one way to check: when you try to reproduce this issue on the develop branch (before your changes) using the same approach as you’re currently using, does the issue arise? If not, then your changes have not fixed this problem. (In that case, you might want to look at https://github.com/oppia/oppia/wiki/Mobile-device-testing which has some instructions for testing Oppia locally on a mobile device.)

EDIT: If you like, I’m happy to put both of you in touch so you can meet up and debug this better (though this is optional). Let me know if that would be good, and I’d be happy to introduce you by email. Thanks!

seanlip on Nov 20, 2023