move code area to right on bigger screens

src/presentation/Scripts/Cards/CardList.vue

@@ -1,8 +1,17 @@
 <template>
-  <div>
-    <div v-if="categoryIds != null && categoryIds.length > 0" class="cards">
+  <Responsive v-on:widthChanged="width = $event">
+    <!-- <div id="responsivity-debug">
+      Width: {{ width || 'undefined' }}
+      Size: <span v-if="width <= 500">small</span><span v-if="width > 500 && width < 750">medium</span><span v-if="width >= 750">big</span> 
+    </div> -->
+    <div v-if="categoryIds != null && categoryIds.length > 0"  class="cards">
       <CardListItem
         class="card"
+        v-bind:class="{ 
+          'small-screen': width <= 500,
+          'medium-screen': width > 500 && width < 750,
+          'big-screen': width >= 750         
+        }"
         v-for="categoryId of categoryIds"
         :data-category="categoryId"
         v-bind:key="categoryId"
@@ -12,12 +21,13 @@
       </CardListItem>
     </div>
     <div v-else class="error">Something went bad 😢</div>
-  </div>
+  </Responsive>
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
 import CardListItem from './CardListItem.vue';
+import Responsive from '@/presentation/Responsive.vue';
+import { Component } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/StatefulVue';
 import { ICategory } from '@/domain/ICategory';
 import { hasDirective } from './NonCollapsingDirective';
@@ -26,9 +36,11 @@ import { ICategoryCollectionState } from '@/application/Context/State/ICategoryC
 @Component({
   components: {
     CardListItem,
+    Responsive,
   },
 })
 export default class CardList extends StatefulVue {
+  public width: number = 0;
   public categoryIds: number[] = [];
   public activeCategoryId?: number = null;
 
@@ -75,6 +87,7 @@ export default class CardList extends StatefulVue {
   flex-flow: row wrap;
   font-family: $main-font;
 }
+
 .error {
   width: 100%;
   text-align: center;