Improve file thumbnail channel layout

src/assets/css/channel.scss

@@ -175,31 +175,37 @@
   .thumbnail-item.file-item {
     background-color: rgba(245,245,245,1);
     border-radius: 8px;
-    padding: 15px 40px 15px 60px;
+    padding: 12px 40px 12px 76px;
     align-items: start;
     position: relative;
     font-family: Inter;
     font-size: 14 * $chat-text-size;
     font-weight: 400;
-    line-height: 16.38 * $chat-text-size;
+    line-height: 16.8 * $chat-text-size;
     letter-spacing: 0.4 * $chat-text-size;
     text-align: left;
-    b {
+    min-height: 80px;
-      font-weight: 600;
+    .file-name {
+      font-weight: 700;
+      word-break: break-all;
+      text-overflow: ellipsis;
+      max-lines: 2;
+      line-clamp: 2;
+      -webkit-line-clamp: 2;
     }
     svg, .v-icon {
       position: absolute;
       top: 12px;
       left: 12px;
-      width: 40px;
+      width: 56px;
-      height: 40px;
+      height: 56px;
     }
     &::after {
       content: " ";
       background: url("~@/assets/icons/ic_export.svg") no-repeat;
       background-position: 0 0; 
       position: absolute;
-      right: 15px;
+      right: 12px;
       height: 24px;
       width: 24px;
       margin: auto 0;
@@ -207,6 +213,11 @@
     &:hover {
       opacity: 0.7;
     }
+    .file-size {
+      font-size: 12 * $chat-text-size;
+      font-weight: 400;
+      line-height: 14.4 * $chat-text-size;
+    }
     & .zip {
       color: #0060e5;
     }   

src/assets/css/chat.scss

@@ -251,6 +251,7 @@ body {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
+        line-clamp: 4;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
       }
@@ -1612,6 +1613,16 @@ body {
   margin-bottom: $chat-standard-padding-xs;
 }
 
-.thumbnail-item .zip {
+.thumbnail-item {
-  color: #1d1d1d;
+  line-height: 16.38 * $chat-text-size;
+  .file-name {
+    font-weight: 700;
+  }
+  .file-size {
+    margin-top: 8px;
+    color: #61605F;
+  }
+  .zip {
+    color: #1d1d1d;
+  }
 }

src/components/file_mode/ThumbnailView.vue

@@ -8,8 +8,8 @@
         <v-img v-else-if="item.event.getContent().msgtype == 'm.image' && item.src" :aspect-ratio="previewOnly ? (16 / 9) : undefined" :class="{'thumbnail-item': true, 'preview': previewOnly}" :src="item.src" :contain="!previewOnly" :cover="previewOnly" />
         <div v-else :class="{'thumbnail-item': true, 'preview': previewOnly, 'file-item': true}" >
             <v-icon :class="fileTypeIconClass">{{ fileTypeIcon }}</v-icon>
-            <b>{{ $sanitize(fileName) }}</b>
+            <div class="file-name">{{ $sanitize(fileName) }}</div>
-            <div>{{ fileSize }}</div>
+            <div class="file-size">{{ fileSize }}</div>
         </div>
     </div>
 </template>