Fix language switcher responsiveness

[AlexVelezLl]

Summary

Fix the responsiveness of the LanguageSwitcherList using the new KListWithOverflow that takes into account the space available to render the number of languages that fit on a single line.

References

Closes #11923

Screenshots

Before:

After:

Reviewer guidance

1. Test with the setup wizard
2. Go to the step of choosing a default language for Kolibri
3. Play with the window width checking that the amount of languages displayed are the optimal to keep it in one line.

---

Testing checklist

• [x] Contributor has fully tested the PR manually
• [x] If there are any front-end changes, before/after screenshots are included
• [ ] Critical user journeys are covered by Gherkin stories
• [ ] Critical and brittle code paths are covered by unit tests

PR process

• [x] PR has the correct target branch and milestone
• [x] PR has 'needs review' or 'work-in-progress' label
• [ ] If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• [ ] If this is an important user-facing change, PR or related issue has a 'changelog' label
• [ ] If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions[bot]]

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.16.1.dev0+git.20240424140317-unsigned.exe
Debian Package	kolibri_0.16.1.dev0+git.20240424140317-0ubuntu1_all.deb
Android Package (APK)	kolibri-0.16.1.dev0+git.20240424140317-0.1.0-debug.apk
TAR file	kolibri-0.16.1.dev0+git.20240424140317.tar.gz
WHL file	kolibri-0.16.1.dev0+git.20240424140317-py2.py3-none-any.whl

[AlexVelezLl]

Just found that this PR was creating an overflow on the login page, and had some KListWithOverflow styles interfering with the language switcher, so we could wait for https://github.com/learningequality/kolibri-design-system/pull/612 to be released before merging this pr.

[AlexVelezLl]

Hi @pcenov, this should be solved now! I would really appreciate it if you could take another look at it :open_hands:.

[pcenov]

Hi @AlexVelezLl see the following video:

https://github.com/learningequality/kolibri/assets/79847249/a4227217-cb6a-4e57-adab-4d3756956679

In smaller resolutions we can get into a salutation where we only have the 'More languages' label left on its own or even overlapping with the last remaining language. I think in such cases we should always see the globe icon, one language and the 'More languages' label on the next line.

[AlexVelezLl]

Thanks @pcenov! I'll give a look at that case.

[AlexVelezLl]

Hi @pcenov. This should be fixed now! Could you take a look please? =)

[pcenov]

Hi @AlexVelezLl - I think it's definitely improved but I am still able to get to a state where only the 'More languages' button is displayed (when having selected languages with longer names such as Portuguese (Mozambique). This is valid for the setup wizard, the home page and create an account:

https://github.com/learningequality/kolibri/assets/79847249/f64d1e05-1102-4e7c-8b56-2831ce853212

[AlexVelezLl]

Hmm, that's because we don't have enough space to render both the language and the button @pcenov. What would be the correct behavior in that case? We could try to add a validation and show "change language" instead of "more languages" if the current language isn't shown.

[pcenov]

Hi @AlexVelezLl it's best to discuss this with @marcellamaki - I'm just pointing out that previously we were always showing the current language plus the 'More languages' link.

[marcellamaki]

Hi @pcenov and @AlexVelezLl - thank you for the collaboration so far here 🎉 Alex, I am wondering how complicated it would be to have the current language "stack" above the "more languages" button? So at this point, these become block rather than inline?

But as I suggest that, I realize this is probably not a default behavior in KListWithOverflow though (although I am less familiar than you are, certainly).

If that's not the default behavior, I do think at some point it might be worth considering how to extend the list for cases like this (especially with the mobile responsiveness perspective in mind), but we don't necessarily want to make that change just yet. Hmmm.... I'm going to think about this some more. I welcome any thoughts :) Misha may also have some ideas.

[AlexVelezLl]

Hi @marcellamaki! Yes, I was also wondering if this should come into KListWithOverflow. I don't think this should be the default behavior because I think in cases like the KTabs, we wouldn't want this stacked behavior. I tried to achieve this with a boolean prop and avoided hiding the last element if the prop was true, but it was becoming much more complex to handle inside the KListWithOverflow.

For now I propose handling it inside the LanguageSwitcherList with this more simpler solution that is just show the selected language inside the more button if all list items are overflowed.

Other Ideas that come to my mind can be to have an #empty slot, and we just show the empty slot instead of the more button if it is provided and all items are overflowed.