User or unassigned option is not displayed in available options if it is in use

ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.html

@@ -27,12 +27,12 @@
                     [displayWith]="displayUserFn"
                     (optionSelected)="selected($event)"
                     panelWidth="260px">
-    <mat-option [ngClass]="{'assigned': !assigneeId}" [value]="null">
+    <mat-option [fxHide]="!assigneeId" [value]="null">
       <mat-icon class="unassigned-icon">account_circle</mat-icon>
-      <span style="margin-right: auto" translate>alarm.unassigned</span>
+      <span translate>alarm.unassigned</span>
     </mat-option>
-    <mat-option [ngClass]="{ 'assigned': assigneeId === user.id.id }"
-                *ngFor="let user of filteredUsers | async" [value]="user">
+    <mat-option *ngFor="let user of filteredUsers | async" [value]="user"
+                [fxHide]="assigneeId === user.id.id">
       <span class="user-avatar" [innerHTML]="getUserInitials(user)"
             [style.background-color]="getAvatarBgColor(user)">
       </span>

ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.scss

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 :host {
   width: 100%;
   overflow: auto;
@@ -26,7 +27,6 @@
     padding-top: 8px;
     height: 340px;
     font-size: 14px;
-
     background-color: #fff;
     .mat-form-field-wrapper {
       margin-right: 8px;
@@ -44,17 +44,12 @@
   }
 
   .tb-assignee-autocomplete {
-
     &.tb-assignee-autocomplete.mat-autocomplete-visible {
       position: relative;
       left: -8px;
       margin-top: 8px;
       box-shadow: none !important;
     }
-    .assigned {
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-
     .mat-option {
       font-size: 14px;
       border: none;
@@ -84,8 +79,8 @@
       }
       .user-display-name {
         max-width: 180px;
+        overflow: hidden;
         span {
-          white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }

ui-ngx/src/app/modules/home/components/alarm/alarm-assignee-panel.component.ts

@@ -119,7 +119,7 @@ export class AlarmAssigneePanelComponent implements  OnInit, AfterViewInit, OnDe
   }
 
   selected(event: MatAutocompleteSelectedEvent): void {
-    this.selectUserFormGroup.get('user').patchValue('');
+    this.clear();
     const user: User  = event.option.value;
     if (user) {
       this.assign(user);

ui-ngx/src/app/modules/home/components/alarm/alarm-table-config.ts

@@ -249,7 +249,7 @@ export class AlarmTableConfig extends EntityTableConfig<AlarmInfo, TimePageLink>
     const connectedPosition: ConnectedPosition = {
       originX: 'end',
       originY: 'bottom',
-      overlayX: 'center',
+      overlayX: 'end',
       overlayY: 'top'
     };
     config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -1115,7 +1115,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
     const connectedPosition: ConnectedPosition = {
       originX: 'end',
       originY: 'bottom',
-      overlayX: 'center',
+      overlayX: 'end',
       overlayY: 'top'
     };
     config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -4757,7 +4757,7 @@
             "display-alarm-details": "Display alarm details",
             "allow-alarms-ack": "Allow alarms acknowledgment",
             "allow-alarms-clear": "Allow alarms clear",
-            "display-alarm-comments": "Display alarm comments"
+            "display-alarm-comments": "Display alarm comments",
             "allow-alarms-assign": "Allow alarms assignment"
         },
         "value-source": {