fix(snippets): truncate name (#501)

Author: antonreshetov

src/renderer/components/sidebar/SidebarListItem.vue

@@ -29,7 +29,11 @@
         :name="(model.icon as string)"
       />
     </span>
-    <slot />
+    <div class="name">
+      <div>
+        <slot />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -262,5 +266,17 @@ watch(
       transform: rotate(90deg);
     }
   }
+  .name {
+    user-select: none;
+    display: table;
+    table-layout: fixed;
+    width: 90%;
+    overflow: hidden;
+    > div {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+  }
 }
 </style>

src/renderer/components/sidebar/TheFolder.vue

@@ -8,7 +8,9 @@
       v-if="!isEdit"
       class="name"
     >
-      {{ name }}
+      <div>
+        {{ name }}
+      </div>
     </div>
     <input
       v-else
@@ -84,5 +86,14 @@ onUnmounted(() => {
 }
 .name {
   user-select: none;
+  display: table;
+  table-layout: fixed;
+  width: 90%;
+  overflow: hidden;
+  > div {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
 }
 </style>