Issue #41: Done.

src/components/Discover/Conformance/ConformanceResults.vue

@@ -3,7 +3,7 @@
   <div v-show="isCoverPlate" class="w-[calc(100vw_-_300px)] h-screen-main fixed bottom-0 right-0 bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[1]">
   </div>
   <!-- title -->
-  <p class="h2 text-base">Conformance Checking Results ({{ data.total }})<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></p>
+  <p class="text-base leading-10 font-bold">Conformance Checking Results ({{ data.total }})</p>
   <!-- total group -->
   <ul class=" text-neutral-10 text-sm flex gap-2 py-2">
     <li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
@@ -31,7 +31,7 @@
     <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
       <p class="p-2 flex justify-between items-center">
         <div>
-          <span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
+          <span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.case">info</span></span>
           <small class="text-neutral-700 font-normal block">{{ data.charts.cases.xMin }} ~ {{ data.charts.cases.xMax }}</small>
         </div>
         <span class="text-2xl font-bold"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
@@ -238,14 +238,17 @@ export default {
       loopFirstCases: null,
       selectDurationTime: null,
       tooltip: {
-        results: {
-          value: 'This page will perform a conformance check based on the filtering results of the map.',
-        },
         rate: {
-          value: '=(total Non-Conformance/total Conformance)*100%'
+          value: '= Conforming / (Conforming + Not Conforming) * 100%',
+          class: '!max-w-[36rem] !text-[10px]',
+        },
+        case: {
+          value: '= Conforming / (Conforming + Not Conforming)',
+          class: '!max-w-[36rem] !text-[10px]',
         },
         timeTrend: {
-          value: '=Not Conforming / (total Conforming+total Not Conforming)'
+          value: '=Not Conforming / (total Conforming+total Not Conforming)',
+          class: '!max-w-[36rem] !text-[10px]',
         }
       }
     }