[fix] responsive onboarding setup wizard

[FidalMathew]

Summary

Made the setup wizard responsive for screen size by eliminating max-width.

video.mp4

…

References

fixes #7997
…

Reviewer guidance

…

---

Testing checklist

• Contributor has fully tested the PR manually
• 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

• PR has the correct target branch and milestone
• 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

[AlexVelezLl]

Hi @FidalMathew! Unfortunately, this doesn't seem like the right change. The issue referred to the fact that the number of items in the language list changed even though the width of the card container did not change, but instead changed depending on the width of the window.
Look at these two cases:

In both of them, the width of the card is the same, 700px, but in the second one there is one less item than in the first one, and that is because the window is narrower, but it shouldn't be like that.

It is an issue with the way we calculate the number of visible languages.

[FidalMathew]

@AlexVelezLl Thanks for the clarification. I am considering fetching the width of the OnboardingStepBase component and passing its width as props to LanguageSwitcherList. Using width, we can set the breakpoints for numVisibleLanguageBtns. Is this a good approach to solving the issue?

[AlexVelezLl]

Oh @FidalMathew I think you can add a ref to the div container and obtain its width

[FidalMathew]

Oh @FidalMathew I think you can add a ref to the div container and obtain its width

Got it! Thanks @AlexVelezLl

[FidalMathew]

@AlexVelezLl Could you take a look at the PR?

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b13.dev0_git.23.g979c13fa.pex
Windows Installer (EXE)	kolibri-0.16.0b13.dev0+git.23.g979c13fa-unsigned.exe
Debian Package	kolibri_0.16.0b13.dev0+git.23.g979c13fa-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b13.dev0+git.23.g979c13fa-0.4.0.dmg
Android Package (APK)	kolibri-0.16.0b13.dev0+git.23.g979c13fa-0.1.0-debug.apk
TAR file	kolibri-0.16.0b13.dev0+git.23.g979c13fa.tar.gz
WHL file	kolibri-0.16.0b13.dev0+git.23.g979c13fa-py2.py3-none-any.whl

[pcenov]

Hi @FidalMathew and @AlexVelezLl - can we do something for the position of the 'More languages' label - currently when I select a language different than English there are some cases where it goes on the second line which should be avoided if possible:

2024-02-15_14-18-41.mp4

[FidalMathew]

Hi @FidalMathew and @AlexVelezLl - can we do something for the position of the 'More languages' label - currently when I select a language different than English there are some cases where it goes on the second line which should be avoided if possible:

2024-02-15_14-18-41.mp4

Thanks @pcenov, I'll look into this issue.

[FidalMathew]

@pcenov do you have any suggestions on how to approach this issue?

[AlexVelezLl]

Hi @FidalMathew, we are devleoping a new KDS component that I think would fit good for doing this. But could take some more time.

@pcenov, Can we accept this as a solution for the original issue regarding the items hiding regardless of whether there is still space in the container?, and make a follow up issue about it only taking a single line? Since for this there are some other dependencies that we should develop first.

[FidalMathew]

Hi @FidalMathew, we are devleoping a new KDS component that I think would fit good for doing this. But could take some more time.

@pcenov, Can we accept this as a solution for the original issue regarding the items hiding regardless of whether there is still space in the container?, and make a follow up issue about it only taking a single line? Since for this there are some other dependencies that we should develop first.

Thanks for letting me know! 😄

[pcenov]

Hi @AlexVelezLl - yes, certainly!

[AlexVelezLl]

Thank you all! LGTM :). We will follow it up in #11923.