ui fixes

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.html

@@ -1,3 +1,20 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
 <mat-tab-group [formGroup]="basicFormGroup">
   <mat-tab label="{{ 'gateway.general' | translate }}">
     <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.html

@@ -1,3 +1,20 @@
+<!--
+
+    Copyright © 2016-2024 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
 <mat-tab-group [formGroup]="basicFormGroup">
   <mat-tab label="{{ 'gateway.general' | translate }}">
     <ng-container [ngTemplateOutlet]="generalTabContent"></ng-container>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html

@@ -18,7 +18,7 @@
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
   <div class="server-settings">
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.server-url</div>
+      <div class="server-conf-field-title fixed-title-width-250" translate>gateway.server-url</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -35,7 +35,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}" translate>
+      <div class="server-conf-field-title fixed-title-width-250" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}" translate>
         gateway.timeout
       </div>
       <div class="tb-flex no-gap">
@@ -55,7 +55,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.security</div>
+      <div class="server-conf-field-title fixed-title-width-250" translate>gateway.security</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <mat-select formControlName="security">
@@ -65,7 +65,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate>
+      <div class="server-conf-field-title fixed-title-width-250" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}" translate>
         gateway.scan-period
       </div>
       <div class="tb-flex no-gap">
@@ -86,7 +86,7 @@
       </div>
     </div>
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}" translate>
+      <div class="server-conf-field-title fixed-title-width-250" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}" translate>
         gateway.sub-check-period
       </div>
       <div class="tb-flex no-gap">

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss

@@ -17,10 +17,11 @@
   width: 100%;
   height: 100%;
   display: block;
+}
 
-  .server-settings {
-    ::ng-deep .fixed-title-width {
-      min-width: 254px !important;
-    }
-  }
+.server-conf-field-title {
+  width: 30%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html

@@ -630,7 +630,7 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+              <mat-form-field class="tb-flex no-gap device-node-pattern-field" appearance="outline" subscriptSizing="dynamic">
                 <input matInput name="value" formControlName="deviceNodePattern" placeholder="{{ 'gateway.set' | translate }}"/>
                 <mat-icon matSuffix
                           matTooltipPosition="above"

ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss

@@ -74,6 +74,12 @@
   }
 
   .device-config {
+    gap: 12px;
     padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .device-node-pattern-field {
+    flex-basis: 3%;
   }
 }

ui-ngx/src/form.scss

@@ -238,6 +238,9 @@
       &-230 {
         min-width: 230px;
       }
+      &-250 {
+        min-width: 250px;
+      }
     }
     [class^="fixed-title-width"] {
       @media #{$mat-xs} {