From 7687d7540632bcd0e0b9c41cafecd18dc9014b27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laureline=20Val=C3=A9rie=20David?= <ltouroumov@gmail.com>
Date: Tue, 10 Sep 2024 12:09:16 +0200
Subject: [PATCH] Responsive: Menu Bar

---
 components/viewer/ViewScoreStatus.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/viewer/ViewScoreStatus.vue b/components/viewer/ViewScoreStatus.vue
index 34f9d95..ce6b44d 100644
--- a/components/viewer/ViewScoreStatus.vue
+++ b/components/viewer/ViewScoreStatus.vue
@@ -1,11 +1,13 @@
 <template>
-  <div class="d-flex gap-1" :class="{ 'flex-column': vertical }">
+  <div class="d-flex gap-3" :class="{ 'flex-column': vertical }">
     <span
       v-for="{ score, value } in activeScores"
       :key="score.id"
       class="d-flex score flex-row gap-2"
     >
-      <span v-if="score.beforeText && !short">{{ score.beforeText }}</span>
+      <span v-if="score.beforeText && !short" class="d-none d-sm-block">
+        {{ score.beforeText }}
+      </span>
       <span>{{ -value }}</span>
       <span v-if="score.afterText">{{ score.afterText }}</span>
     </span>
@@ -39,8 +41,8 @@ const activeScores = computed<{ score: PointType; value: number }[]>(() => {
   )(scores);
 });
 </script>
-<style scoped land="scss">
+<style scoped lang="scss">
 .score {
-  padding-right: 25px;
+  // padding-right: 25px;
 }
 </style>