Discover: fix sidebarTraces style :deep code.

src/components/Discover/sidebarState.vue

@@ -6,8 +6,8 @@
         <li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700" @click="switchTab('insight')" :class="tab === 'insight'? 'text-neutral-900': ''">Insight</li>
       </ul>
     </template>
+    <!-- header: summary -->
     <div v-if="tab === 'summary'">
-    <!-- <div> -->
       <!-- Stats -->
       <ul class="pb-4 border-b border-neutral-300">
         <li>
@@ -71,8 +71,8 @@
 
       </div>
     </div>
+    <!-- header: insight -->
     <div v-if="tab === 'insight'">
-    <!-- <div> -->
       <div class="border-b-2 border-neutral-300 mb-4">
         <p class="h2">Most frequent</p>
         <ul class="list-disc ml-6">
@@ -163,7 +163,6 @@
     </div>
   </Sidebar>
 </template>
-<!-- @hide="hide" @show="show" -->
 
 <script>
 import getNumberLabel from '@/module/numberLabel.js';

src/components/Discover/sidebarTraces.vue

@@ -195,17 +195,17 @@ export default {
 
 <style scoped>
 /* 進度條顏色 */
-:deep .p-progressbar .p-progressbar-value {
+:deep(.p-progressbar .p-progressbar-value) {
   @apply bg-primary
 }
 /* Table set */
-:deep .p-datatable-thead th {
+:deep(.p-datatable-thead th) {
   @apply sticky top-0 left-0 z-10 bg-neutral-10
 }
-:deep .p-datatable .p-datatable-thead > tr > th {
+:deep(.p-datatable .p-datatable-thead > tr > th) {
   @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500
 }
-:deep .p-datatable .p-datatable-tbody > tr > td {
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
   @apply border-neutral-500 !border-t-0
 }
 </style>