From 30eff75b835c34052465f91952d8be4fae82bacf Mon Sep 17 00:00:00 2001
From: chiayin <chiayin.kuo@dsp.im>
Date: Wed, 8 Feb 2023 15:16:47 +0800
Subject: [PATCH] files text ellipsis layout done

---
 src/views/Files/index.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 9a820f2..9d735ea 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -6,7 +6,7 @@
       <!-- card group 最多六個-->
       <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
         <!-- card item v-for -->
-        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 ">
           <a href="" class="h-full flex flex-col justify-between">
             <div>
               <figure class="mb-2">
@@ -15,8 +15,8 @@
               <h3 class="text-sm font-medium mb-2">
                 File type
               </h3>
-              <p class="text-sm text-neutral-500">
-                Daily operation records of......
+              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+                Daily operation recggggggggggggly operation records of Daily operation records of Daily operation records of Daily operation records of
               </p>
             </div>
             <p class="text-sm text-neutral-500">
@@ -126,7 +126,7 @@
         </figure>
       </div>
       <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden h-[calc(100vh_-_480px)]  scrollbar">
-        <table class="w-full border-separate border-spacing-x-4 text-sm ">
+        <table class="w-full border-separate border-spacing-x-4 text-sm table-fixed">
         <thead class="sticky top-0 bg-neutral-10">
             <tr>
               <th>
@@ -390,10 +390,10 @@
 <style scoped lang="scss">
 table {
   th {
-    @apply border-b border-neutral-500 p-3 text-left font-black
+    @apply border-b border-neutral-500 p-3 text-left font-black whitespace-nowrap break-keep overflow-hidden text-ellipsis
   }
   td {
-    @apply border-b border-neutral-300 p-3 font-medium break-all
+    @apply border-b border-neutral-300 p-3 font-medium whitespace-nowrap break-keep overflow-hidden text-ellipsis
   }
   tr {
     @apply hover:bg-primary/50 duration-300