Issues #183: done.

src/components/Discover/Map/SidebarTraces.vue

@@ -41,10 +41,16 @@
             <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
           </div>
         </div>
-        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
+        <div class="overflow-y-auto overflow-x-auto scrollbar w-full h-[calc(100%_-_264px)] infiniteTable " @scroll="handleScroll">
           <DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
             <div v-for="(col, index) in columnData" :key="index">
-              <Column :field="col.field" :header="col.header"></Column>
+              <Column :field="col.field" :header="col.header">
+                <template #body="{ data }">
+                  <div :class="data[col.field]?.length > 18 ? 'whitespace-normal' : 'whitespace-nowrap'">
+                     {{ data[col.field] }}
+                  </div>
+                </template>
+              </Column>
             </div>
           </DataTable>
         </div>
@@ -94,7 +100,6 @@ export default {
           ratio: this.getPercentLabel(trace.count / sum),
         };
       })
-
       return result;
     },
     caseData: function() {
@@ -141,7 +146,7 @@ export default {
     },
     infiniteFirstCases: function(newValue){
       if(this.infiniteFirstCases) this.infiniteData = JSON.parse(JSON.stringify(newValue));
-    }
+    },
   },
   methods: {
     /**
@@ -269,7 +274,7 @@ export default {
   @apply bg-primary
 }
 /* Table set */
-:deep(.p-datatable-thead th) {
+:deep(.p-datatable-thead) {
   @apply sticky top-0 left-0 z-10 bg-neutral-10
 }
 :deep(.p-datatable .p-datatable-thead > tr > th) {
@@ -278,4 +283,13 @@ export default {
 :deep(.p-datatable .p-datatable-tbody > tr > td) {
   @apply border-neutral-500 !border-t-0
 }
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+  white-space: nowrap;
+}
+:deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) {
+  min-width: 72px;
+  max-width: 184px;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
 </style>