viewer: items with long titles overflow

code review changes

GitHub: Resolves #137

2 files changed, 3 insertions, 4 deletions

diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 5166834..9805873 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -29,7 +29,7 @@
     />
     <div v-else class="thumbnail-other flex-column flex-center">
       <fa-icon :icon="getIcon()" size="4x" />
-      {{item.title | underscore-to-space}}
+      {{item.title}}
     </div>
   </div>
 </template>
@@ -65,8 +65,9 @@ export default class LdThumbnail extends Vue {
 .thumbnail-other {
   width: $thumbnail-other-size;
   height: $thumbnail-other-size;
+  padding-top: 1em;
   text-align: center;
-  word-break: break-all;
+  word-break: break-word;
   overflow: hidden;
 }
 
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index f849525..1f77875 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -31,8 +31,6 @@ import(/* webpackChunkName: "ui" */ "@/plugins/dragscroll");
 import(/* webpackChunkName: "ui" */ "@/plugins/fontawesome");
 const MainLayout = () => import(/* webpackChunkName: "ui" */ "@/views/MainLayout.vue");
 
-Vue.filter("underscore-to-space", (input: string) => input.replace(/_/g, ' '));
-
 new Vue({
   router,
   i18n,