Подверстал расписание стримов под разные экраны

resources/views/Schedule.vue

@@ -1,10 +1,10 @@
 <template>
     <v-sheet class="mt-5 mb-5 rounded-lg w-75">
-        <p class="text-h3 ma-5">Расписание стримов</p>
+        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Расписание стримов</p>
         <v-skeleton-loader v-if="fetching" type="text" />
-        <p v-else class="ma-5 text-h4"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
+        <p v-else class="ma-5 text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
         <ScheduleTable/>
-        <p class="text-h3 ma-5">Ссылочки</p>
+        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Ссылочки</p>
         <Links/>
     </v-sheet>
 </template>

resources/views/Schedule/Links.vue

@@ -5,7 +5,10 @@
         name: "Links",
         data: () => ({
             links: [],
-            fetching: true
+            fetching: true,
+            windowHeight: document.documentElement.clientHeight,
+            windowWidth: document.documentElement.clientWidth,
+            isWide: window.innerWidth >= 460
         }),
         mounted() {
             axios
@@ -14,13 +17,25 @@
                     this.links = response.data;
                     this.fetching = false;
                 });
+            this.myEventHandler();
+            window.addEventListener("resize", this.myEventHandler, { passive: true });
+        },
+        created() {
+            window.addEventListener("resize", this.myEventHandler);
+        },
+        methods: {
+            myEventHandler(e) {
+                this.windowHeight = document.documentElement.clientHeight;
+                this.windowWidth = document.documentElement.clientWidth;
+                this.isWide = this.windowWidth >= 460;
+            }
         }
     }
 </script>
 
 <template>
     <div class="w-100 d-flex justify-center">
-        <v-list class="w-66">
+        <v-list :class="isWide ? 'w-66' : 'w-100'">
             <v-skeleton-loader v-if="fetching" type="list-item"/>
             <v-list-item v-else class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
                 <template v-slot:prepend>

resources/views/Schedule/ScheduleTable.vue

@@ -27,7 +27,7 @@
 <template>
     <div class="w-100 d-flex justify-center">
         <v-skeleton-loader v-if="fetching" type="table"/>
-        <v-table v-else class="text-h5 w-66">
+        <v-table v-else class="text-xl-h5 text-lg-h5 text-md-h5 text-sm-h5  text-body-2 w-66">
             <tbody>
             <tr v-for="schedule in schedules">
                 <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>