תיקון תצוגת התראות במובייל

Author: ShlomoCode

src/components/SnackBar.vue

@@ -1,6 +1,6 @@
 <template>
     <template v-for="snack in snacksStore.snacks" :key="snack.id">
-        <v-snackbar v-model="snack.show" v-bind="snack" position="fixed">
+        <v-snackbar v-model="snack.show" v-bind="snack"  :location="xs ? 'top' : 'bottom'" :position="xsAndDown ? 'absolute' : 'fixed'">
             <div :style="snack.ltr ? 'direction: ltr !important;' : ''">
                 {{ snack.text }}
             </div>
@@ -15,5 +15,8 @@
 
 <script setup>
 import { useSnacksStore } from '@/stores/snacks';
+import { useDisplay } from 'vuetify';
+
+const { xs } = useDisplay();
 const snacksStore = useSnacksStore();
 </script>

src/components/SubscriptionsList.vue

@@ -10,7 +10,7 @@
                 <v-spacer></v-spacer>
                 <v-col cols="10" justify="center">
                     <v-card>
-                        <v-card-title class="text-h5">אין פידים מתאימים להצגה</v-card-title>
+                        <v-card-title :class="xs ? 'text-h6 text-center' : 'text-h5'">אין פידים מתאימים להצגה</v-card-title>
                         <v-card-text>
                             ניתן להוסיף פידים חדשים באמצעות לחיצה על הכפתור "הוסף מקור חדש" בצד שמאל
                         </v-card-text>
@@ -25,9 +25,11 @@
 <script setup>
 import { useFeedsStore } from '@/stores/feeds'
 import { computed, toRefs } from 'vue'
+import { useDisplay } from 'vuetify'
 import FeedCard from '@/components/FeedCard.vue'
 
 const feedStore = useFeedsStore()
+const { xs } = useDisplay()
 
 const $props = defineProps({
     search: {