fix: Issues #51 done.

src/components/Discover/Conformance/ConformanceSidebar/ActList.vue

@@ -2,7 +2,7 @@
   <div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
     <p class="h2 pl-2 border-b mb-3">Activity list</p>
     <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]" id="cyp-conformance-list-checkbox">
-      <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index">
+      <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index" :title="act">
         <Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" @change="actListData"/>
         <label :for="index" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
       </div>

src/components/Discover/Conformance/ConformanceSidebar/ActRadio.vue

@@ -2,7 +2,7 @@
   <div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2">
     <p class="h2 pl-2 border-b mb-3">{{ title }}</p>
     <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]">
-      <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index">
+      <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index" :title="act">
         <RadioButton v-model="selectedRadio" :inputId="index + act" :name="select" :value="act" @change="actRadioData" />
         <label :for="index + act" class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ act }}</label>
       </div>

src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue

@@ -6,7 +6,7 @@
       <div class="h-[calc(100%_-_56px)]">
         <Draggable :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" :sort="false" @end="onEnd" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
           <template #item="{ element, index }">
-            <div :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)">
+            <div :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" class="flex items-center w-[166px] border rounded p-2 bg-neutral-10 cursor-pointer hover:bg-primary/20" @dblclick="moveActItem(index, element)" :title="element">
               <span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
             </div>
           </template>
@@ -25,7 +25,7 @@
         <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center">
           <draggable class="h-full" :group="{name: 'activity'}" :list="listSequence" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
             <template #item="{ element, index }">
-              <div>
+              <div :title="element">
                 <div class="flex justify-center items-center">
                   <div class="w-full p-2 border rounded bg-neutral-10  cursor-pointer hover:bg-primary/20" @dblclick="moveSeqItem(index, element)">
                     <span>{{ element }}</span>

src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue

@@ -1,6 +1,6 @@
 <template>
   <ul class="space-y-2" id="cyp-conformance-result-arrow">
-    <li class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index">
+    <li class="flex justify-start items-center pr-4" v-for="(act, index) in data" :key="index" :title="act">
       <span class="material-symbols-outlined text-primary mr-2">
         arrow_circle_down
       </span>

src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue

@@ -1,6 +1,6 @@
 <template>
   <ul class="space-y-2" id="cyp-conformance-result-check">
-    <li class="flex justify-start items-center pr-4" v-for="(act, index) in datadata" :key="index">
+    <li class="flex justify-start items-center pr-4" v-for="(act, index) in datadata" :key="index" :title="act">
       <span class="material-symbols-outlined text-primary mr-2">
         check_circle
       </span>

src/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue

@@ -1,6 +1,6 @@
 <template>
   <ul id="cyp-conformance-result-dot">
-    <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in data" :key="index + act">
+    <li class="flex justify-start items-center py-1 pr-4" v-for="(act, index) in data" :key="index + act" :title="act">
       <span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>
       <span class="mr-2 block w-12">{{ act.category }}</span>
       <span class="px-2 py-1 border border-neutral-500 w-full whitespace-nowrap break-keep text-ellipsis overflow-hidden block">{{ act.task }}</span>