fix: Activity Reactions display issue on certain screen resolutions - M…

…EED-7823 - Meeds-io/meeds#2593 (#4248)

This PR will fix the display of activity reaction in some screen
resolution

webapp/src/main/webapp/vue-apps/activity-reactions/components/ActivityReactions.vue

@@ -102,7 +102,7 @@ export default {
       return this.showAvatarAnimation;
     },
     isDesktop() {
-      return !this.$vuetify.breakpoint.mobile;
+      return this.$vuetify.breakpoint.width >= this.$vuetify.breakpoint.thresholds.lg;
     }
   },
   methods: {

webapp/src/main/webapp/vue-apps/activity-stream/components/activity/footer/ActivityActions.vue

@@ -31,13 +31,14 @@ export default {
         activity: this.activity,
         activityTypeExtension: this.activityTypeExtension,
         isActivityDetail: this.isActivityDetail,
+        isMobile: !this.isDesktop
       };
     },
     actionBarBorderClass() {
       return !this.isDesktop && 'border-top-color border-light-color' || '';
     },
     isDesktop() {
-      return this.$vuetify && this.$vuetify.breakpoint && this.$vuetify.breakpoint.name !== 'xs' && this.$vuetify.breakpoint.name !== 'sm' && this.$vuetify.breakpoint.name !== 'md';
+      return this.$vuetify.breakpoint.width >= this.$vuetify.breakpoint.thresholds.lg;
     },
   },
 };

webapp/src/main/webapp/vue-apps/activity-stream/components/activity/footer/ActivityFooter.vue

@@ -64,7 +64,7 @@ export default {
       return this.isDesktop && 'border-top-color border-light-color' || '';
     },
     isDesktop() {
-      return this.$vuetify && this.$vuetify.breakpoint && this.$vuetify.breakpoint.name !== 'xs' && this.$vuetify.breakpoint.name !== 'sm' && this.$vuetify.breakpoint.name !== 'md';
+      return this.$vuetify.breakpoint.width >= this.$vuetify.breakpoint.thresholds.lg;
     },
   },
   created() {

webapp/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityCommentAction.vue

@@ -40,6 +40,10 @@ export default {
       type: Object,
       default: null,
     },
+    isMobile: {
+      type: Boolean,
+      default: () => false
+    },
   },
   data: () => ({
     hasCommented: false,
@@ -54,9 +58,6 @@ export default {
     commentTextColorClass() {
       return this.hasCommented && 'primary--text' || '';
     },
-    isMobile() {
-      return this.$vuetify.breakpoint.name === 'sm' || this.$vuetify.breakpoint.name === 'xs';
-    },
   },
   watch: {
     activity() {

webapp/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityLikeAction.vue

@@ -41,6 +41,10 @@ export default {
       type: Object,
       default: null,
     },
+    isMobile: {
+      type: Boolean,
+      default: () => false
+    },
   },
   data: () => ({
     changingLike: false,
@@ -59,9 +63,6 @@ export default {
     likeButtonTitle() {
       return this.hasLiked && this.$t('UIActivity.msg.UnlikeActivity') || this.$t('UIActivity.msg.LikeActivity');
     },
-    isMobile() {
-      return this.$vuetify.breakpoint.name === 'sm' || this.$vuetify.breakpoint.name === 'xs';
-    },
   },
   created() {
     this.computeLikes();

webapp/src/main/webapp/vue-apps/activity-stream/components/activity/footer/actions/ActivityShareAction.vue

@@ -45,6 +45,10 @@ export default {
       type: Object,
       default: null,
     },
+    isMobile: {
+      type: Boolean,
+      default: () => false
+    },
   },
   data: () => ({
     hasShared: false,
@@ -68,9 +72,6 @@ export default {
     shareIconColorClass() {
       return this.hasShared && 'primary--text' || 'disabled--text';
     },
-    isMobile() {
-      return this.$vuetify.breakpoint.name === 'sm' || this.$vuetify.breakpoint.name === 'xs';
-    },
   },
   created() {
     this.$root.$on('activity-shared', this.setHasShared);