Refactor: mobile layout

components/CourseList.vue

@@ -3,7 +3,7 @@
     <v-col v-for="(course, id) in courses" :key="id" cols="12" lg="6">
       <v-card width="100%" @click="openCourse(id)">
         <v-row no-gutters class="flex-nowrap">
-          <v-col cols="auto">
+          <v-col class="flex-grow-0 flex-shrink-1">
             <v-img
               src="https://www.onlinecollegeplan.com/wp-content/uploads/2018/05/computer-programming.jpg"
               :width="imgSize"
@@ -11,11 +11,11 @@
               class="rounded-l-lg"
             ></v-img>
           </v-col>
-          <v-col cols="auto" class="flex-grow-1 flex-shrink-0">
+          <v-col class="flex-grow-1 flex-shrink-0">
             <v-card-title class="text--secondary text-subtitle-1">{{ id.toUpperCase() }}</v-card-title>
-            <v-card-subtitle class="text--primary text-h6 text-wrap">{{ course.name }}</v-card-subtitle>
+            <v-card-subtitle class="text--primary text-h6">{{ course.name }}</v-card-subtitle>
           </v-col>
-          <v-col cols="auto">
+          <v-col class="flex-grow-0 flex-shrink-1">
             <v-btn icon @click.stop="isFavoriteCourse(id) ? addToFavorites(id, false) : addToFavorites(id, true)">
               <v-icon>{{ isFavoriteCourse(id) ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
             </v-btn>
@@ -51,16 +51,15 @@ export default {
       return this.$store.state.user.courses && this.$store.state.user.courses.includes(courseID)
     },
     addToFavorites (courseID, add) {
-      const gameRef = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
+      const userRef = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
 
-      // Atomically add a new answer to the "player[ID]answers" array field.
-      updateDoc(gameRef, {
+      updateDoc(userRef, {
         kurse: add ? arrayUnion(courseID) : arrayRemove(courseID)
       }).then((empty) => {
         // Query execution was successful
         add ? this.$store.commit('addFavoriteCourse', courseID) : this.$store.commit('removeFavoriteCourse', courseID)
       }).catch((error) => {
-        // Failed to update the game; display error message
+        // Failed; display error message
         this.$toast({ content: error, color: 'error' })
       })
     }