From 0c1236772146a52a59ab5e29bbe50c06938d14e4 Mon Sep 17 00:00:00 2001
From: Chad Griffis <16548994+gryffs@users.noreply.github.com>
Date: Sat, 1 May 2021 23:55:49 +0800
Subject: [PATCH] Add flexbox to cipher list to correct display center issue.

---
 src/app/vault/ciphers.component.html | 28 +++++++++++++++-------------
 src/scss/list.scss                   | 10 ++++++++++
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 9c441dab49..f4663cc6e1 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -12,20 +12,22 @@
             (scrolled)="loadMore()">
             <a *ngFor="let c of filteredCiphers" appStopClick (click)="selectCipher(c)"
                 (contextmenu)="rightClickCipher(c)" href="#" title="{{'viewItem' | i18n}}"
-                [ngClass]="{'active': c.id === activeCipherId}">
+                [ngClass]="{'active': c.id === activeCipherId}" class="flex-list-item">
                 <app-vault-icon [cipher]="c"></app-vault-icon>
-                <span class="text">
-                    {{c.name}}
-                    <ng-container *ngIf="c.organizationId">
-                        <i class="fa fa-share-alt 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="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
-                        <span class="sr-only">{{'attachments' | i18n}}</span>
-                    </ng-container>
-                </span>
-                <span class="detail">{{c.subTitle}}</span>
+                <a class='flex-cipher-list-item'>
+                    <span class="text">
+                        {{c.name}}
+                        <ng-container *ngIf="c.organizationId">
+                            <i class="fa fa-share-alt 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="fa fa-paperclip text-muted" title="{{'attachments' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'attachments' | i18n}}</span>
+                        </ng-container>
+                    </span>
+                    <span *ngIf="c.subTitle" class="detail">{{c.subTitle}}</span>
+                </a>
             </a>
         </div>
         <div class="no-items" *ngIf="!filteredCiphers.length">
diff --git a/src/scss/list.scss b/src/scss/list.scss
index 5a50dd7ad5..2757750f92 100644
--- a/src/scss/list.scss
+++ b/src/scss/list.scss
@@ -130,4 +130,14 @@
             }
         }
     }
+
+    .flex-cipher-list-item {
+        flex-direction: column;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: flex-start;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }