Issue #39: change Rule cleared.

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

@@ -1,8 +1,7 @@
 <template>
   <div class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
-    <p class="h2 pl-2">Activity list</p>
+    <p class="h2 pl-2 border-b mb-3">Activity list</p>
     <div class="h-[calc(100%_-_48px)]">
-      <p class="h2 pl-2 border-b mb-3">Sort</p>
       <div class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
           <div class="flex items-center w-[166px]" v-for="(act, index) in sortData" :key="index">
               <Checkbox v-model="actList" :inputId="index.toString()" name="actList" :value="act" @change="actListData"/>

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

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

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

@@ -2,14 +2,9 @@
   <div class="h-full w-full flex justify-between items-center">
     <!-- Activity List -->
     <div class="h-full w-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2">
-      <p class="h2 pl-2">Activity list</p>
+      <p class="h2 pl-2 border-b mb-3">Activity list</p>
-      <div class="h-[calc(100%_-_48px)]">
+      <div class="h-[calc(100%_-_56px)]">
-        <p class="h2 pl-2 border-b mb-3">Sort</p>
+        <Draggable ref="tableA" :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" @end="onEnd" @add="onMove" class="h-full flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar">
-        <!-- :group="{name: 'activity', pull: 'clone' }" -->
-        <!-- group="activity" -->
-        <!-- @end="onEnd" -->
-        <Draggable ref="tableA" :list="datadata" :group="{name: 'activity', pull: 'clone' }" itemKey="name" animation="300" :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" @end="onEnd" @add="onMove" class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_52px)]">
-          <!-- :class="listSequence.includes(element) ? 'border-primary text-primary' : ''" -->
           <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)">
               <span class="whitespace-nowrap break-keep text-ellipsis overflow-hidden">{{ element }}</span>
@@ -20,16 +15,14 @@
     </div>
     <!-- sequence -->
     <div class="w-full h-full relative bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-2 space-y-2 text-sm">
-      <p class="h2 border-b border-500 my-2">Sequence</p>
+      <p class="h2 border-b border-500 mb-3">Sequence</p>
       <!-- No Data -->
       <div v-if="listSequence && listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
         <p class="text-neutral-500">Please drag and drop at least two activities here and sort.</p>
       </div>
       <!-- Have Data -->
-      <div class="py-4 m-auto w-full  h-[calc(100%_-_56px)]">
+      <div class="m-auto w-full  h-[calc(100%_-_56px)]">
         <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
-          <!-- :group="{name: 'activity', pull: true }" -->
-          <!-- group="activity" -->
           <draggable ref="tableB" class="h-full" :group="{name: 'activity', pull: true, put: true }" :list="listSequence" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" :component-data="getComponentData()">
             <template #item="{ element, index }">
               <div>