[fix] responsive onboarding setup wizard

kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue

@@ -56,6 +56,12 @@
       LanguageSwitcherModal,
     },
     mixins: [responsiveWindowMixin, languageSwitcherMixin],
+    props: {
+      parentBreakpoint: {
+        type: Number,
+        default: -1,
+      },
+    },
     data() {
       return {
         showLanguageModal: false,
@@ -69,8 +75,14 @@
         return availableLanguages[currentLanguage];
       },
       numVisibleLanguageBtns() {
-        // At windowBreakpoint = 0, only the "More languages" button will show
-        return Math.min(4, this.windowBreakpoint);
+        // At visibleBtns = 0, only the "More languages" button will show
+        let visibleBtns = 4;
+        if (this.parentBreakpoint < 0) {
+          visibleBtns = this.windowBreakpoint;
+        } else {
+          visibleBtns = this.parentBreakpoint;
+        }
+        return Math.min(4, visibleBtns);
       },
       numSelectableLanguages() {
         return this.selectableLanguages.length;

kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/DefaultLanguageForm.vue

@@ -1,10 +1,12 @@
 <template>
 
   <OnboardingStepBase
+    ref="container"
     :title="$tr('languageFormHeader')"
     @continue="handleSubmit"
+    @resize="updateWidth"
   >
-    <LanguageSwitcherList />
+    <LanguageSwitcherList :parentBreakpoint="parentBreakpoint" />
   </OnboardingStepBase>
 
 </template>
@@ -21,11 +23,41 @@
       OnboardingStepBase,
       LanguageSwitcherList,
     },
+    data() {
+      return {
+        parentBreakpoint: 4,
+      };
+    },
+    mounted() {
+      this.updateWidth();
+      window.addEventListener('resize', this.updateWidth);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.updateWidth);
+    },
     inject: ['wizardService'],
     methods: {
       handleSubmit() {
         this.wizardService.send('CONTINUE');
       },
+      updateWidth() {
+        const element = this.$refs.container.$el;
+        const width = element.offsetWidth;
+        let num = 4;
+
+        if (width < 440) {
+          num = 0;
+        } else if (width < 520) {
+          num = 1;
+        } else if (width < 600) {
+          num = 2;
+        } else if (width < 660) {
+          num = 3;
+        } else {
+          num = 4;
+        }
+        this.parentBreakpoint = num;
+      },
     },
     $trs: {
       languageFormHeader: {