Merge pull request #11007 from maxunbearable/fix/3645-template-name-width

Added max width to the display of the template name

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html

@@ -18,8 +18,8 @@
 <div class="mat-subtitle-1 title">{{ 'gateway.rpc.templates-title' | translate }}</div>
 <mat-expansion-panel hideToggle *ngFor="let template of rpcTemplates">
   <mat-expansion-panel-header>
-    <mat-panel-title>
-      {{template.name}}
+    <mat-panel-title class="template-name">
+      <span matTooltip="{{template.name}}" matTooltipPosition="above">{{template.name}}</span>
     </mat-panel-title>
     <mat-panel-description>
       <button mat-icon-button matTooltip="Delete" (click)="deleteTemplate($event, template)">

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.scss

@@ -59,6 +59,7 @@
     flex-direction: row-reverse;
     align-items: center;
     margin-right: 0;
+    flex: 0;
 
     & > mat-icon {
       margin-left: 15px;
@@ -89,6 +90,20 @@
     }
   }
 
+  .template-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+
+  ::ng-deep .mat-content {
+    align-items: center;
+  }
+
+  .mat-expansion-panel-header-title {
+    flex: 1;
+    margin: 0;
+  }
 }