From 372239b673307eb33735fee37492fc2607605e8e Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 29 Jan 2020 22:37:20 +0100
Subject: [PATCH] Add ellipsis everywhere

---
 resources/js/components/TwofaccountShow.vue | 4 ++--
 resources/js/views/Accounts.vue             | 4 ++--
 resources/sass/app.scss                     | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/TwofaccountShow.vue b/resources/js/components/TwofaccountShow.vue
index d55063fe..2c003002 100644
--- a/resources/js/components/TwofaccountShow.vue
+++ b/resources/js/components/TwofaccountShow.vue
@@ -3,8 +3,8 @@
         <figure class="image is-64x64" style="display: inline-block"  v-if="icon">
             <img :src="'storage/icons/' + icon">
         </figure>
-        <p class="is-size-4 has-text-grey-light">{{ service }}</p>
-        <p class="is-size-6 has-text-grey">{{ account }}</p>
+        <p class="is-size-4 has-text-grey-light has-ellipsis">{{ service }}</p>
+        <p class="is-size-6 has-text-grey has-ellipsis">{{ account }}</p>
         <p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ otp }}</p>
         <ul class="dots" v-if="type === 'totp'">
             <li v-for="n in 30"></li>
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index dd4b8dc6..e271ec30 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -18,10 +18,10 @@
             <!-- accounts -->
             <div class="columns is-multiline is-centered is-gapless">
                 <div class="column is-narrow" v-for="account in filteredAccounts">
-                    <div class="tfa has-text-white is-size-3" @click.stop="showAccount(account.id)">
+                    <div class="tfa has-text-white is-size-3 has-ellipsis" @click.stop="showAccount(account.id)">
                         <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
                         {{ account.service }}
-                        <span class="is-family-primary is-size-6 has-text-grey">{{ account.account }}</span>
+                        <span class="is-family-primary is-size-6 has-text-grey ">{{ account.account }}</span>
                     </div>
                     <span v-if="editMode">
                         <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark">
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index f913ba07..cfb8bb3e 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -64,6 +64,9 @@
 
 .tfa span {
   display: block;
+}
+
+.has-ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;