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

apps/browser/src/popup/components/cipher-row.component.html

@@ -15,7 +15,8 @@
     <app-vault-icon [cipher]="cipher"></app-vault-icon>
     <div class="row-main-content">
       <span class="text">
-        {{ cipher.name | ellipsis: 20 }}
+        <span class="truncate-box">
+          <span class="truncate">{{ cipher.name }}</span>
           <ng-container *ngIf="cipher.organizationId">
             <i
               class="bwi bwi-collection text-muted"
@@ -33,6 +34,7 @@
             <span class="sr-only">{{ "attachments" | i18n }}</span>
           </ng-container>
         </span>
+      </span>
       <span class="detail">{{ cipher.subTitle }}</span>
     </div>
   </button>

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;
+}

apps/desktop/src/app/vault/ciphers.component.html

@@ -24,7 +24,8 @@
           <app-vault-icon [cipher]="c"></app-vault-icon>
           <div class="flex-cipher-list-item">
             <span class="text">
-              {{ c.name | ellipsis }}
+              <span class="truncate-box">
+                <span class="truncate">{{ c.name }}</span>
                 <ng-container *ngIf="c.organizationId">
                   <i
                     class="bwi bwi-collection text-muted"
@@ -42,6 +43,7 @@
                   <span class="sr-only">{{ "attachments" | i18n }}</span>
                 </ng-container>
               </span>
+            </span>
             <span *ngIf="c.subTitle" class="detail">{{ c.subTitle }}</span>
           </div>
         </button>

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;
+}