From 4e48ffc14d09dabeea12dc495144277db62b5b7d Mon Sep 17 00:00:00 2001
From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com>
Date: Wed, 4 Nov 2020 12:11:18 +0000
Subject: [PATCH] fix: previewer title overflow

---
 frontend/src/components/files/Preview.vue |  4 +---
 frontend/src/css/styles.css               | 17 +++++++++--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/files/Preview.vue b/frontend/src/components/files/Preview.vue
index 71d50632..1a8435b0 100644
--- a/frontend/src/components/files/Preview.vue
+++ b/frontend/src/components/files/Preview.vue
@@ -5,9 +5,7 @@
         <i class="material-icons">close</i>
       </button>
 
-      <div class="title">
-        <span>{{ this.name }}</span>
-      </div>
+      <div class="title">{{ this.name }}</div>
 
       <preview-size-button v-if="isResizeEnabled && this.req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading"></preview-size-button>
       <button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 8d486c0d..aed59c60 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -119,18 +119,23 @@
 
 #previewer .bar {
   width: 100%;
-  text-align: right;
   display: flex;
   padding: 0.5em;
   height: 3.7em;
 }
 
+#previewer .bar > * {
+  flex: 0 0 auto;
+}
+
 #previewer .bar .title {
-  margin-right: auto;
+  display: block;
+  flex: 1 1 auto;
   padding: 0 1em;
-  line-height: 2.7em;
+  line-height: 2.3em;
   overflow: hidden;
-  word-break: break-word;
+  text-overflow: ellipsis;
+  font-size: 1.2em;
   color: #fff;
 }
 
@@ -220,10 +225,6 @@
   word-break: break-word;
 }
 
-#previewer .title span {
-  font-size: 1.2em;
-}
-
 #previewer .loading {
   height: 100%;
   width: 100%;