[Transferred from Web repo] [BUG]: Overflow of text ("For parents and Teachers") in footer in iPhone SE dimensions

[ATULPOP]

Describe the bug

As seen the the image in iPhone SE dimensions the text is overflown

The text ("For parents and Teachers") is coming in two lines instead of one which does not look good.

URL of the page where the issue is observed.

https://www.oppia.org/

Steps To Reproduce

Go to home page
Open iPhone SE dimensions and this can be seen.

Expected Behavior

The text should not overflow in two lines.

UPDATE: See https://www.figma.com/design/DmnJCFMWjldS6sp5aYDrA7/Oppia-%23120%3A-[Web-Repo]-Overflow-of-Text-in-Footer-(iPhone-SE)?node-id=0-1&t=Lfc9eS4IO3KA52pk-0](https://www.figma.com/design/DmnJCFMWjldS6sp5aYDrA7/Oppia-%23120%3A-%5BWeb-Repo%5D-Overflow-of-Text-in-Footer-(iPhone-SE)?node-id=0-1&t=Lfc9eS4IO3KA52pk-0 for the mocks to follow when solving this issue.

What device are you using?

Desktop

Operating System

Windows

Additional context

N/A

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. If the issue occurred before commit c7db0fe, the most effective approach is to utilize the Python setup for conducting a git bisect (You only need to go back as far as commit https://github.com/oppia/oppia/commits/9a334e9). If you need to perform a git bisect for any commit beyond that commit, the Docker setup will be suitable. 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!

[Baggie220]

Hi, I am interested to solve this little issue .
When I looked carefully I found a simple solution for this . The solutions steps are as follows

1. Go to oppia-footer.component.css .
2. Add an media Query and change the font size .

After this when we go to iPhone SE dimensions (375 * 667) this bug is resolved.
Here is the proof :

I would be very happy to make a PR on this by the above approach . @seanlip @kevintab95 Can you assign this task to me ? Thanks !

[seanlip]

I'm not sure that changing the font size is a scalable solution. It may introduce accessibility issues because the font size is too small. We need a more general solution for handling the footer when the screen width is too small -- perhaps we can design a smaller footer that doesn't have all three columns side-by-side. So I am going to move this issue to the design team for them to weigh in on what the best thing to do here is.

---

Also, @ATULPOP please see the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue for how to pick up an issue in general. Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

And finally, if you are interested in tackling issues related to responsiveness, you might like to take a look at the existing issues in this category: https://github.com/orgs/oppia/projects/3/views/8?sliceBy%5Bvalue%5D=Responsiveness%2Fanimation+issues

[seanlip]

(Moving to the design team's repo for further action.)

[dhruvmistry96]

I was able to replicate this issue on iPhone SE iOS Version 12.4 .

I think going the following routes might work:

• Changing the font size of non-key links in the footer
• Or showing all of the links vertically like Google Play store. (Image attached for reference)

Would love to work on this project and try to brainstorm different solutions.

[stepmalt]

UXW approved.

[seanlip]

Hi @qluuu, I am a bit confused about this issue. There doesn't seem to be a concrete solution proposed yet, or a mock for what should be done here, so why is this in "waiting on UX lead approval" stage?

In general, I think there should be a single concrete recommendation by the design team in order for a design project to get to the "hand back to devs" stage, otherwise it's unclear what the dev should do. Could you PTAL?

[qluuu]

@seanlip The proposed solution in the mock is the modification of breakpoints for the menu navigation footer as whole as well as proposed width size of the flexbox/text containers for each individual menu item to ensure that no matter the screen size, each menu item only takes up one line (rather than wrapping to the next line as it currently does for "For parents and teachers" which affects the visual consistency of the footer as detailed in the github issue description above). In the proposed solution, the menu items are displayed in three column, two column, and one column for breakpoints dependent on the user's screen size. With the new text container widths (as shown in the Dev Notes 'Menu Wrapping Specs' annotation box), all menu items maintain the 13px as dictated by design system standards with no need for text wrapping into the next line even for smaller screen sizes like the iPhone SE.

As for the status, the cover page was showing waiting for UX lead approval stage because the final approval from all UX leads was not issued until just yesterday night. I've now changed the status to reflect the status for Handoff for PM Review.

Please let me know if I've addressed your concerns. I want to ensure there are no misunderstandings regarding the project assignment or the proposed solution.

[seanlip]

Ah, sorry, I didn't realize there were mocks attached to this issue already. Replicating the link here since it will disappear once the issue is moved out of the design team's repository: https://www.figma.com/design/DmnJCFMWjldS6sp5aYDrA7/Oppia-%23120%3A-[Web-Repo]-Overflow-of-Text-in-Footer-(iPhone-SE)?node-id=0-1&t=Lfc9eS4IO3KA52pk-0

I think it looks fine :) I'll get it sent back to the developer team, thanks!

[seanlip]

Update: This issue is now ready for developers to take up. Please see the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue for how to pick up an issue in general. Please also follow the other instructions on that wiki page if you have not yet done so.

Also, if you have questions about the proposed design, please contact @qluuu. Thanks!

[seanlip]

I think the fix for this is the same as that for #20499. Since the latter issue is more general, I'm going to close this issue as a duplicate of that other one; let's move the conversation there instead.