From bd9fad893484de2d31130166ab0fa5d7dab8f121 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Thu, 13 Apr 2023 15:15:10 +0300
Subject: [PATCH] Alarm assignee/comments style fixes, enhancements

---
 .../alarm/alarm-comment-dialog.component.html        |  4 ++--
 .../alarm/alarm-details-dialog.component.html        |  2 +-
 .../widget/lib/alarms-table-widget.component.html    | 12 ++++++++----
 .../widget/lib/alarms-table-widget.component.scss    |  4 ++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
index d7e3366a35..8618592ae0 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-comment-dialog.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
index 85bdf96ea3..0db5bd9584 100644
--- a/ui-ngx/src/app/modules/home/components/alarm/alarm-details-dialog.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
index f91caf9baa..9a23e86bf8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html
+++ b/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"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
index 2a77861e21..6c566807f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss
+++ b/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;
               }
             }
           }