Fix language switcher errors

[AlexVelezLl]

(Note) This PR depends on learningequality/kolibri-design-system#680 to be merged and released.

Summary

Updates KDS to fix KListWithOverflow overflow items calculation, and fix KLanguageSwitcherModal positioning. I also checked the Setup wizard, and no regressions were observed.

Before:

After:

References

Fixes #12447.

Reviewer guidance

Follow #12447.

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

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-.pex
Windows Installer (EXE)	kolibri-0.17.0b3.dev0+git.36.g89cfb3a6-windows-setup-unsigned.exe
Debian Package	kolibri_0.17.0b3.dev0+git.36.g89cfb3a6-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.17.0b3.dev0+git.36.g89cfb3a6.dmg
Android Package (APK)	kolibri-0.17.0b3.dev0+git.36.g89cfb3a6-0.1.3-debug.apk
TAR file	kolibri-0.17.0b3.dev0+git.36.g89cfb3a6.tar.gz
WHL file	kolibri-0.17.0b3.dev0+git.36.g89cfb3a6-py2.py3-none-any.whl

[MisRob]

Thank you @AlexVelezLl, I can confirm the fixes work well and I didn't observe any regressions.

[MisRob]

Ah one more thing, after new KDS version is installed here, would you also removed <Teleport> from here

kolibri/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/index.vue

Lines 4 to 8 in 542d558

	<Teleport
	v-if="windowIsLarge"
	to="body"
	>
	<KModal

or do you prefer follow-up issue?

[rtibbles]

Would be a matter of adding :appendToBody="windowIsLarge" I think, then removing Teleport, and the teleport dependency in the learn plugin. Should be straight forward, but fine for a follow up if preferred.

[MisRob]

@rtibbles

So this syntax says

<Teleport 
   v-if="windowIsLarge" 
   to="body" 
 > 

to use Teleport only if windowIsLarge? Sounds like silly question :) My read of this was that the modal is rather not supposed to get rendered at all for windowIsLarge.

[MisRob]

Would be a matter of adding :appendToBody="windowIsLarge" I think

Asking because I left a note for @AlexVelezLl just for consideration of having appendTo prop so we can choose the element to append to (you can see the KDS issue for reasons for that). However, if we'd need to support conditional teleport application, in such case KDS would need to support something like appendTo=windowIsLarge ? 'body' : null where null would indicate we don't want to append it, if that was the direction to take (or some alternative interface that would allow for condition)

[rtibbles]

Oh... yes, sorry - so we should just move the v-if to the KModal instead, you're right and it would just be appendToBody as it is here...

[MisRob]

No problem :) That simplifies the situation around potential appendTo.

[MisRob]

I thought that perhaps Teleport does some nice magic around v-ifs after reading your comment :)

[MisRob]

As soon as we install the new release here, we can merge. Thanks @AlexVelezLl.