fix: radar

app/citizen-frontend/src/pages/index.vue

@@ -55,12 +55,15 @@
             <v-col
               v-for="summary in radarSummaries"
               :key="summary.label"
-              class="text-center border pa-2"
-              cols="12"
-              sm="6"
-              md="4"
+              class="radar-summary text-center border pa-2"
             >
-              <div>{{ summary.label }}</div>
+              <v-tooltip :text="summary.tip" location="top">
+                <template #activator="{ props }">
+                  <span v-bind="props" class="radar-summary-label" tabindex="0">
+                    {{ summary.label }}
+                  </span>
+                </template>
+              </v-tooltip>
 
               <div class="font-weight-black">
                 {{ summary.score }}
@@ -389,19 +392,22 @@ const radarSummaries = computed(() => {
 
   return [
     {
-      label: '上肢肌力',
+      label: '上肢',
+      tip: '上肢肌力',
       score: physicalFitnessRadarData.value.upperBodyStrength,
     },
     {
-      label: '下肢肌耐力',
+      label: '下肢',
+      tip: '下肢肌耐力',
       score: physicalFitnessRadarData.value.lowerBodyStrengthAndEndurance,
     },
-    { label: '心肺耐力', score: physicalFitnessRadarData.value.cardio },
+    { label: '心肺', tip: '心肺耐力', score: physicalFitnessRadarData.value.cardio },
     {
-      label: '平衡、敏捷與行動',
+      label: '敏捷',
+      tip: '平衡、敏捷與行動',
       score: physicalFitnessRadarData.value.balanceAgilityAndMobility,
     },
-    { label: '柔軟度', score: physicalFitnessRadarData.value.flexibility },
+    { label: '柔軟', tip: '柔軟度', score: physicalFitnessRadarData.value.flexibility },
   ]
 })
 
@@ -567,6 +573,15 @@ function updateTodayTimeString() {
 </script>
 
 <style scoped>
+.radar-summary {
+  flex: 0 0 20%;
+  max-width: 20%;
+}
+
+.radar-summary-label {
+  cursor: help;
+}
+
 .passport-card {
   background: linear-gradient(135deg, #1d7063 0%, #145248 100%);
   border: 1px solid rgba(71, 194, 166, 0.3);