From aad3e998f6b0334f00793b1c094f6880ae7572b6 Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Mon, 4 Mar 2024 16:48:00 +0800
Subject: [PATCH] fix: Issues #187 done.

---
 .../Discover/Map/Filter/Attributes.vue        | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue
index 322685e..6919637 100644
--- a/src/components/Discover/Map/Filter/Attributes.vue
+++ b/src/components/Discover/Map/Filter/Attributes.vue
@@ -8,7 +8,13 @@
       <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_56px)]">
         <DataTable v-model:selection="selectedAttName" :value="filterAttrs" dataKey="key" breakpoint="0" :tableClass="tableClass" @row-select="switchAttNameRadio">
           <Column selectionMode="single" :headerClass="headerModeClass" :bodyClass="bodyModeClass"></Column>
-          <Column field="key" header="Attribute" :headerClass="headerClass" :bodyClass="bodyClass" sortable></Column>
+          <Column field="key" header="Attribute" :headerClass="headerClass" :bodyClass="bodyClass" sortable>
+            <template #body="slotProps">
+                <div :title="slotProps.data.key" class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full">
+                  {{ slotProps.data.key }}
+                </div>
+              </template>
+          </Column>
         </DataTable>
       </div>
     </div>
@@ -29,7 +35,13 @@
               </Row>
             </ColumnGroup>
             <Column selectionMode="single" :bodyClass="bodyModeClass"></Column>
-            <Column field="label" header="Activity" :bodyClass="bodyClass"></Column>
+            <Column field="label" header="Activity" :bodyClass="bodyClass">
+              <template #body="slotProps">
+                <div :title="slotProps.data.label" class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full">
+                  {{ slotProps.data.label }}
+                </div>
+              </template>
+            </Column>
             <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
               <template #body="slotProps">
                 <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
@@ -52,7 +64,13 @@
               </Row>
             </ColumnGroup>
             <Column selectionMode="multiple" :bodyClass="bodyModeClass"></Column>
-            <Column field="value" header="Activity" :bodyClass="bodyClass"></Column>
+            <Column field="value" header="Activity" :bodyClass="bodyClass">
+              <template #body="slotProps">
+                <div :title="slotProps.data.value" class="whitespace-nowrap break-keep overflow-hidden text-ellipsis w-full">
+                  {{ slotProps.data.value }}
+                </div>
+              </template>
+            </Column>
             <Column header="進度條" bodyClass="!py-2 !border-0 min-w-[96px]">
               <template #body="slotProps">
                 <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
@@ -659,3 +677,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+:deep(table tbody td:nth-child(2)) {
+  @apply whitespace-nowrap break-keep overflow-hidden text-ellipsis max-w-0
+}
+</style>