viewer: items with long titles overflow

GitHub: Resolves #137

3 files changed, 6 insertions, 4 deletions

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 26cb355..bbf4843 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -65,7 +65,7 @@ $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
 $breadcrumb-margins: 12px;
 $breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
-$thumbnail-other-size: 120px;
+$thumbnail-other-size: 10em;
 
 // Layout
 
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 3ef7fa8..5166834 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}}
+      {{item.title | underscore-to-space}}
     </div>
   </div>
 </template>
@@ -66,6 +66,8 @@ export default class LdThumbnail extends Vue {
   width: $thumbnail-other-size;
   height: $thumbnail-other-size;
   text-align: center;
+  word-break: break-all;
+  overflow: hidden;
 }
 
 .preload {
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index bc005c5..f849525 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -31,11 +31,11 @@ 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,
   store,
   render: h => h(MainLayout)
 }).$mount("#ldgallery")
-
-