From 6773eb0b8de8e702c572160c5eafdf54823f385d Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Fri, 5 Jul 2024 17:53:34 +0300
Subject: [PATCH] min width for server inputs fix

---
 .../server-config.component.html              | 168 +++++++++---------
 .../server-config.component.scss              |   6 +
 2 files changed, 91 insertions(+), 83 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
index fc103a4ad6..feff4d0a2d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.html
@@ -16,93 +16,95 @@
 
 -->
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" 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 }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="('gateway.server-url-required') | translate"
-                  *ngIf="serverConfigFormGroup.get('url').hasError('required') &&
-                         serverConfigFormGroup.get('url').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
+  <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="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 }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="('gateway.server-url-required') | translate"
+                    *ngIf="serverConfigFormGroup.get('url').hasError('required') &&
+                           serverConfigFormGroup.get('url').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
     </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>
-      gateway.timeout
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="0" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.timeout-error' | translate: {min: 1000}"
-                  *ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('timeoutInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('timeoutInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
+    <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>
+        gateway.timeout
+      </div>
+      <div class="tb-flex no-gap">
+        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" name="value" formControlName="timeoutInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="'gateway.timeout-error' | translate: {min: 1000}"
+                    *ngIf="(serverConfigFormGroup.get('timeoutInMillis').hasError('required') ||
+                           serverConfigFormGroup.get('timeoutInMillis').hasError('min')) &&
+                           serverConfigFormGroup.get('timeoutInMillis').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
     </div>
-  </div>
-  <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" 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">
-          <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>
-        </mat-select>
-      </mat-form-field>
+    <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
+      <div class="fixed-title-width" 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">
+            <mat-option *ngFor="let version of securityPolicyTypes" [value]="version.value">{{ version.name }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
     </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>
-      gateway.scan-period
-    </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="0" name="value"
-               formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}"
-                  *ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('scanPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
-    </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>
-      gateway.sub-check-period
+    <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>
+        gateway.scan-period
+      </div>
+      <div class="tb-flex no-gap">
+        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" name="value"
+                 formControlName="scanPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="'gateway.scan-period-error' | translate: {min: 1000}"
+                    *ngIf="(serverConfigFormGroup.get('scanPeriodInMillis').hasError('required') ||
+                           serverConfigFormGroup.get('scanPeriodInMillis').hasError('min')) &&
+                           serverConfigFormGroup.get('scanPeriodInMillis').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
     </div>
-    <div class="tb-flex no-gap">
-      <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
-        <input matInput type="number" min="0" name="value"
-               formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
-        <mat-icon matSuffix
-                  matTooltipPosition="above"
-                  matTooltipClass="tb-error-tooltip"
-                  [matTooltip]="'gateway.sub-check-period-error' | translate: {min: 10}"
-                  *ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
-                         serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
-                         serverConfigFormGroup.get('subCheckPeriodInMillis').touched"
-                  class="tb-error">
-          warning
-        </mat-icon>
-      </mat-form-field>
+    <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>
+        gateway.sub-check-period
+      </div>
+      <div class="tb-flex no-gap">
+        <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
+          <input matInput type="number" min="0" name="value"
+                 formControlName="subCheckPeriodInMillis" placeholder="{{ 'gateway.set' | translate }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="'gateway.sub-check-period-error' | translate: {min: 10}"
+                    *ngIf="(serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('required') ||
+                           serverConfigFormGroup.get('subCheckPeriodInMillis').hasError('min')) &&
+                           serverConfigFormGroup.get('subCheckPeriodInMillis').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
+        </mat-form-field>
+      </div>
     </div>
   </div>
   <div class="tb-form-row" fxLayoutAlign="space-between center">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
index 416f368279..815e92da90 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/server-config/server-config.component.scss
@@ -17,4 +17,10 @@
   width: 100%;
   height: 100%;
   display: block;
+
+  .server-settings {
+    ::ng-deep .fixed-title-width {
+      min-width: 254px !important;
+    }
+  }
 }