fix(ratings): fix css responsive flow on screen <= 725px

Author: dvcol

src/components/views/panel/PanelRating.vue

@@ -44,7 +44,7 @@ const props = defineProps({
 
 const i18n = useI18n('panel', 'ratings');
 
-const { votes, rating, score } = toRefs(props);
+const { votes, rating } = toRefs(props);
 
 const votesUnit = computed(() => {
   if (votes?.value === undefined) return undefined;
@@ -121,17 +121,19 @@ const _rating = computed(() => (rating?.value ?? 0) * 10);
 .rating-container {
   --duration: 1000ms;
 
-  flex: 1 1 auto;
-  min-width: 6rem;
-  padding: 0.5rem;
+  flex: 1 0 6rem;
 
   .rating-skeleton {
     width: 2.125rem;
     margin-top: 0.5rem;
   }
 
-  @media (width <= 640px) {
-    padding: 0.5rem 25%;
+  @media (width <= 725px) {
+    padding: 0.5rem 10%;
+  }
+
+  @media (width <= 500px) {
+    padding: 0.5rem;
   }
 }
 </style>

src/components/views/panel/PanelScore.vue

@@ -106,9 +106,7 @@ const containerRef = ref<InstanceType<typeof TextField>>();
 .score-container {
   --duration: 1000ms;
 
-  flex: 1 1 auto;
-  min-width: 6rem;
-  padding: 0.5rem;
+  flex: 1 0 6rem;
 
   .score-label {
     align-self: center;
@@ -124,8 +122,12 @@ const containerRef = ref<InstanceType<typeof TextField>>();
     margin-top: 0.5rem;
   }
 
-  @media (width <= 640px) {
-    padding: 0.5rem 25%;
+  @media (width <= 725px) {
+    padding: 0.5rem 10%;
+  }
+
+  @media (width <= 500px) {
+    padding: 0.5rem;
   }
 }
 </style>

src/components/views/panel/PanelStatistics.vue

@@ -6,6 +6,7 @@ import type { TraktSyncRatingValue } from '@dvcol/trakt-http-client/models';
 import PanelRating from '~/components/views/panel/PanelRating.vue';
 import PanelScore from '~/components/views/panel/PanelScore.vue';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
+import { watchMedia } from '~/utils/window.utils';
 
 defineProps({
   rating: {
@@ -41,18 +42,21 @@ const emit = defineEmits<{
 const { enableRatings } = useExtensionSettingsStoreRefs();
 
 const onScoreEdit = (progress: TraktSyncRatingValue) => emit('onScoreEdit', progress);
+
+const isCompact = watchMedia('(max-width: 725px)');
 </script>
 
 <template>
   <NFlex class="statistics-container" justify="space-around">
+    <slot v-if="isCompact" />
     <PanelRating
       v-if="enableRatings"
       :loading="loadingRating"
       :votes="votes"
       :rating="rating"
       :url="url"
     />
-    <slot />
+    <slot v-if="!isCompact" />
     <PanelScore
       v-if="enableRatings"
       :loading="loadingScore"