[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

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"

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>

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

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>
+              ></i
-            </button>
+              ><button [bitMenuTriggerFor]="orgMenu" class="org-options">
-            <ng-container>
-              <button [bitMenuTriggerFor]="orgMenu" class="org-options ml-auto">
                 <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')">

apps/web/src/scss/vault-filters.scss

@@ -126,6 +126,10 @@
       }
     }
   }
+
+  .org-options {
+    padding: 0 2px;
+  }
 }
 
 .groupings {