From 515ca3f0fe0607b52bcc9cb6220559a4a65b8f8f Mon Sep 17 00:00:00 2001
From: Brandon Maharaj <107377945+BrandonM-Bitwarden@users.noreply.github.com>
Date: Mon, 25 Jul 2022 17:15:44 -0400
Subject: [PATCH] [SG-451] [Defect] - Safari Extension Does Not Display Icon
 for Long Named Orgs (#3145)

* chore: added strings for disabled org messages

* chore: added icon display

* chore: added prevent filter check

* chore: code changes for desktop

* chore: browser

* fix: float icon

* fix: float right icon

* fix: vary elipsis size
---
 .../src/popup/vault/vault-select.component.html      |  2 +-
 .../components/organization-filter.component.html    |  6 ++++--
 apps/desktop/src/scss/base.scss                      |  6 ++++++
 .../components/organization-filter.component.html    | 12 ++++++------
 apps/web/src/scss/vault-filters.scss                 |  4 ++++
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/apps/browser/src/popup/vault/vault-select.component.html b/apps/browser/src/popup/vault/vault-select.component.html
index 69a526c8961..2101b7c019f 100644
--- a/apps/browser/src/popup/vault/vault-select.component.html
+++ b/apps/browser/src/popup/vault/vault-select.component.html
@@ -58,7 +58,7 @@
           class="bwi bwi-fw bwi-family"
           aria-hidden="true"
         ></i>
-        <span>&nbsp;{{ organization.name | ellipsis: 21:true }}</span>
+        <span>&nbsp;{{ organization.name | ellipsis: (organization.enabled ? 21 : 18):true }}</span>
         <i
           *ngIf="!organization.enabled"
           class="bwi bwi-fw bwi-exclamation-triangle text-danger"
diff --git a/apps/desktop/src/app/modules/vault-filter/components/organization-filter.component.html b/apps/desktop/src/app/modules/vault-filter/components/organization-filter.component.html
index 7a8071e5427..585398013c5 100644
--- a/apps/desktop/src/app/modules/vault-filter/components/organization-filter.component.html
+++ b/apps/desktop/src/app/modules/vault-filter/components/organization-filter.component.html
@@ -92,13 +92,15 @@
             >
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               &nbsp;{{ organization.name }}
+            </button>
+            <span class="ml-auto">
               <i
                 *ngIf="!organization.enabled"
-                class="bwi bwi-fw bwi-exclamation-triangle text-danger"
+                class="bwi bwi-fw bwi-exclamation-triangle text-danger mr-auto"
                 aria-label="{{ 'organizationIsDisabled' | i18n }}"
                 appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
               ></i>
-            </button>
+            </span>
           </span>
         </li>
       </ul>
diff --git a/apps/desktop/src/scss/base.scss b/apps/desktop/src/scss/base.scss
index 42cbc3f7ff4..9d667ac602d 100644
--- a/apps/desktop/src/scss/base.scss
+++ b/apps/desktop/src/scss/base.scss
@@ -136,3 +136,9 @@ div:not(.modal)::-webkit-scrollbar-thumb,
 .cdk-virtual-scroll-content-wrapper {
   width: 100%;
 }
+
+//taken from bootstrap for replicating functionality
+.ml-auto,
+.mx-auto {
+  margin-left: auto !important;
+}
diff --git a/apps/web/src/app/modules/vault-filter/components/organization-filter.component.html b/apps/web/src/app/modules/vault-filter/components/organization-filter.component.html
index 7ea5c0c92c5..3c827bc522b 100644
--- a/apps/web/src/app/modules/vault-filter/components/organization-filter.component.html
+++ b/apps/web/src/app/modules/vault-filter/components/organization-filter.component.html
@@ -129,21 +129,21 @@
             <button class="filter-button" (click)="applyOrganizationFilter(organization)">
               <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
               {{ organization.name }}
+            </button>
+            <span class="ml-auto">
               <i
                 *ngIf="!organization.enabled"
-                class="bwi bwi-fw bwi-exclamation-triangle text-danger"
+                class="org-options bwi bwi-fw bwi-exclamation-triangle text-danger"
                 aria-label="{{ 'organizationIsDisabled' | i18n }}"
                 appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
-              ></i>
-            </button>
-            <ng-container>
-              <button [bitMenuTriggerFor]="orgMenu" class="org-options ml-auto">
+              ></i
+              ><button [bitMenuTriggerFor]="orgMenu" class="org-options">
                 <i class="bwi bwi-ellipsis-v" aria-hidden="true"></i>
               </button>
               <bit-menu class="filter-organization-options" #orgMenu>
                 <app-organization-options [organization]="organization"></app-organization-options>
               </bit-menu>
-            </ng-container>
+            </span>
           </span>
         </li>
         <li class="filter-option" *ngIf="!(displayMode === 'singleOrganizationPolicy')">
diff --git a/apps/web/src/scss/vault-filters.scss b/apps/web/src/scss/vault-filters.scss
index 301497ea5b3..c332f6f73c2 100644
--- a/apps/web/src/scss/vault-filters.scss
+++ b/apps/web/src/scss/vault-filters.scss
@@ -126,6 +126,10 @@
       }
     }
   }
+
+  .org-options {
+    padding: 0 2px;
+  }
 }
 
 .groupings {