Make topic page responsive

Resolves MS-791 #complete

client/src/components/LanguageSwitcher.vue

@@ -39,7 +39,12 @@ const { mutate: changeLanguageMutation } = useMutation(
 const changeLanguage = (lang: string) => changeLanguageMutation({ language: lang });
 </script>
 
-<style scoped lang="postcss">
+<style scoped lang="scss">
+@import 'styles/helpers';
 .language-switcher {
+  width: 100%;
+  @include desktop {
+    width: auto;
+  }
 }
 </style>

client/src/components/modules/ModuleFilter.vue

@@ -212,13 +212,19 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
 .module-filter {
   &__filter-selection {
     display: flex;
+    flex-direction: column;
+    @include desktop {
+      flex-direction: row;
+    }
     justify-content: flex-start;
     column-gap: $medium-spacing;
     margin-bottom: $medium-spacing;
   }
 
   &__dropdown {
-    width: 180px;
+    @include desktop {
+      width: 180px;
+    }
   }
 
   &__language-switcher {

client/src/components/modules/ModuleTeaser.vue

@@ -15,7 +15,10 @@
       <p class="module-teaser__description">
         {{ teaser }}
       </p>
-      <div class="module-teaser__pills" v-if="$flavor.showModuleFilter">
+      <div
+        class="module-teaser__pills"
+        v-if="$flavor.showModuleFilter"
+      >
         <pill :text="level?.name"></pill>
         <pill :text="category?.name"></pill>
       </div>
@@ -63,13 +66,17 @@ const moduleLink = computed(() => {
   box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
   border: 1px solid #e2e2e2;
   height: 390px;
-  max-width: 380px;
   width: 100%;
   border-radius: 12px;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
 
+  max-width: $topic-mobile-width;
+  @include desktop {
+    max-width: $topic-desktop-width;
+  }
+
   &--small {
     height: 300px;
   }

client/src/components/ui/PillRadioButtons.vue

@@ -32,7 +32,7 @@ function updateSelectedItem(item: string) {
   overflow: hidden;
 
   &__button {
-    flex: 1;
+    flex-grow: 1;
     cursor: pointer;
     background-color: $color-silver-light;
     text-transform: uppercase;

client/src/pages/topic-page.vue

@@ -167,6 +167,8 @@ export default {
     padding: $large-spacing 0;
   }
   grid-template-columns: 1fr;
+  max-width: $topic-mobile-width;
+  justify-self: center;
   @include desktop {
     max-width: 1500px; // 300px (sidebar) + 3x 380 (max width teaser) + 2x 60 (column gap)
     grid-template-columns: 300px 1fr;

client/src/styles/_variables.scss

@@ -46,7 +46,6 @@ $color-white: #ffffff !default;
 $header-color: $color-charcoal-dark;
 $intro-color: $color-silver-dark;
 $secondary-color: $color-accent-2 !default;
-   
 
 $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
 $serif-font-family: 'ff-meta-serif-web-pro', serif;
@@ -83,7 +82,6 @@ $popover-default-bottom: -110px;
 $footer-width: 800px;
 $news-width: 550px;
 
-
 $medium-input-width: 380px;
 
 $screen-width: 1200px;
@@ -91,3 +89,6 @@ $screen-width: 1200px;
 $small-icon-dimension: 14px;
 $default-icon-dimension: 25px;
 $large-icon-dimension: 40px;
+
+$topic-mobile-width: 480px;
+$topic-desktop-width: 380px;