Alarm assignee/comments style fixes, enhancements

ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div style="min-width: 600px;">
+<form style="width: 600px;">
   <mat-toolbar color="primary">
     <span fxFlex></span>
     <button mat-icon-button (click)="close()" type="button">
@@ -30,4 +30,4 @@
                       [alarmActivityOnly]="true">
     </tb-alarm-comment>
   </div>
-</div>
+</form>

ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form [formGroup]="alarmFormGroup" style="min-width: 600px;">
+<form [formGroup]="alarmFormGroup" style="width: 600px;">
   <mat-toolbar color="primary">
     <h2>{{ 'alarm.alarm-details' | translate }}</h2>
     <span fxFlex></span>

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

@@ -91,14 +91,18 @@
                     {{ getUserInitials(alarm) }}
                   </span>
                   <span [matTooltip]="getUserDisplayName(alarm)"
-                        matTooltipPosition="above"
-                        style="text-overflow: ellipsis">
+                        matTooltipPosition="above">
                     {{ getUserDisplayName(alarm) }}
                   </span>
                 </span>
-                <span *ngIf="!alarm.assigneeId" class="unassigned-container" fxLayout="row" fxLayoutAlign="start center">
+                <span *ngIf="!alarm.assigneeId" class="unassigned-container">
                   <mat-icon class="material-icons unassigned-icon">account_circle</mat-icon>
-                  <span translate>alarm.unassigned</span>
+                  <span matTooltip="{{ 'alarm.unassigned' | translate }}"
+                        matTooltipPosition="above"
+                        style="vertical-align: middle"
+                        translate>
+                    alarm.unassigned
+                  </span>
                 </span>
                 <button *ngIf="allowAssign"
                         mat-icon-button [disabled]="isLoading$ | async"

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

@@ -28,8 +28,8 @@
         }
         .mat-mdc-cell {
           .assignee-cell {
+            white-space: nowrap;
             .assigned-container {
-              white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
               .user-avatar {
@@ -48,7 +48,6 @@
               }
             }
             .unassigned-container {
-              white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
               .material-icons.unassigned-icon {
@@ -58,6 +57,7 @@
                 margin-right: 8px;
                 color: rgba(0, 0, 0, 0.38);
                 overflow: visible;
+                vertical-align: middle;
               }
             }
           }