[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/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')">

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

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