[PS-1674] Correct truncation of ciphers in browser (#3792)

(cherry picked from commit a9ebed0)
bitwarden · Oct 18, 2022 · d7ecb12 · d7ecb12
1 parent 4ad6ba1
commit d7ecb12
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}