From a9ebed0d8d8cdf672a2a55883e0b786ad3564a4f Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Mon, 17 Oct 2022 19:57:51 +0200
Subject: [PATCH] [PS-1674] Correct truncation of ciphers in browser (#3792)

---
 .../components/cipher-row.component.html      | 36 ++++++++++---------
 apps/browser/src/popup/scss/box.scss          | 13 +++++++
 .../src/app/vault/ciphers.component.html      | 36 ++++++++++---------
 apps/desktop/src/scss/list.scss               | 13 +++++++
 4 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/apps/browser/src/popup/components/cipher-row.component.html b/apps/browser/src/popup/components/cipher-row.component.html
index fce966adb4d..ebb18bebe83 100644
--- a/apps/browser/src/popup/components/cipher-row.component.html
+++ b/apps/browser/src/popup/components/cipher-row.component.html
@@ -15,23 +15,25 @@
     <app-vault-icon [cipher]="cipher"></app-vault-icon>
     <div class="row-main-content">
       <span class="text">
-        {{ cipher.name | ellipsis: 20 }}
-        <ng-container *ngIf="cipher.organizationId">
-          <i
-            class="bwi bwi-collection text-muted"
-            title="{{ 'shared' | i18n }}"
-            aria-hidden="true"
-          ></i>
-          <span class="sr-only">{{ "shared" | i18n }}</span>
-        </ng-container>
-        <ng-container *ngIf="cipher.hasAttachments">
-          <i
-            class="bwi bwi-paperclip text-muted"
-            title="{{ 'attachments' | i18n }}"
-            aria-hidden="true"
-          ></i>
-          <span class="sr-only">{{ "attachments" | i18n }}</span>
-        </ng-container>
+        <span class="truncate-box">
+          <span class="truncate">{{ cipher.name }}</span>
+          <ng-container *ngIf="cipher.organizationId">
+            <i
+              class="bwi bwi-collection text-muted"
+              title="{{ 'shared' | i18n }}"
+              aria-hidden="true"
+            ></i>
+            <span class="sr-only">{{ "shared" | i18n }}</span>
+          </ng-container>
+          <ng-container *ngIf="cipher.hasAttachments">
+            <i
+              class="bwi bwi-paperclip text-muted"
+              title="{{ 'attachments' | i18n }}"
+              aria-hidden="true"
+            ></i>
+            <span class="sr-only">{{ "attachments" | i18n }}</span>
+          </ng-container>
+        </span>
       </span>
       <span class="detail">{{ cipher.subTitle }}</span>
     </div>
diff --git a/apps/browser/src/popup/scss/box.scss b/apps/browser/src/popup/scss/box.scss
index 6e0b6f9356a..7be206cbf3a 100644
--- a/apps/browser/src/popup/scss/box.scss
+++ b/apps/browser/src/popup/scss/box.scss
@@ -692,3 +692,16 @@
     }
   }
 }
+
+.truncate-box {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.truncate {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/apps/desktop/src/app/vault/ciphers.component.html b/apps/desktop/src/app/vault/ciphers.component.html
index 0b324cf0edb..478b46b9273 100644
--- a/apps/desktop/src/app/vault/ciphers.component.html
+++ b/apps/desktop/src/app/vault/ciphers.component.html
@@ -24,23 +24,25 @@
           <app-vault-icon [cipher]="c"></app-vault-icon>
           <div class="flex-cipher-list-item">
             <span class="text">
-              {{ c.name | ellipsis }}
-              <ng-container *ngIf="c.organizationId">
-                <i
-                  class="bwi bwi-collection text-muted"
-                  title="{{ 'shared' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="sr-only">{{ "shared" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="c.hasAttachments">
-                <i
-                  class="bwi bwi-paperclip text-muted"
-                  title="{{ 'attachments' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="sr-only">{{ "attachments" | i18n }}</span>
-              </ng-container>
+              <span class="truncate-box">
+                <span class="truncate">{{ c.name }}</span>
+                <ng-container *ngIf="c.organizationId">
+                  <i
+                    class="bwi bwi-collection text-muted"
+                    title="{{ 'shared' | i18n }}"
+                    aria-hidden="true"
+                  ></i>
+                  <span class="sr-only">{{ "shared" | i18n }}</span>
+                </ng-container>
+                <ng-container *ngIf="c.hasAttachments">
+                  <i
+                    class="bwi bwi-paperclip text-muted"
+                    title="{{ 'attachments' | i18n }}"
+                    aria-hidden="true"
+                  ></i>
+                  <span class="sr-only">{{ "attachments" | i18n }}</span>
+                </ng-container>
+              </span>
             </span>
             <span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
           </div>
diff --git a/apps/desktop/src/scss/list.scss b/apps/desktop/src/scss/list.scss
index 343dd550f0c..ec56eaa6c88 100644
--- a/apps/desktop/src/scss/list.scss
+++ b/apps/desktop/src/scss/list.scss
@@ -152,3 +152,16 @@
   height: 100%;
   overflow-y: auto;
 }
+
+.truncate-box {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.truncate {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}