UI: added html reponse improvement for snmp transport config

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.html

@@ -19,7 +19,7 @@
   <div *ngFor="let deviceProfileCommunication of communicationConfigFormArray.controls; let $index = index;
                last as isLast;" fxLayout="row" fxLayoutAlign="start center"
        fxLayoutGap="8px" class="scope-row" [formGroup]="deviceProfileCommunication">
-    <div class="communication-config" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
+    <div class="communication-config">
       <mat-form-field class="spec mat-block" floatLabel="always" hideRequiredMarker>
         <mat-label translate>device-profile.snmp.scope</mat-label>
         <mat-select formControlName="spec" required>

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-communication-config.component.scss

@@ -19,6 +19,13 @@
     border-radius: 4px;
     padding: 8px;
     min-width: 0;
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
+    place-content: stretch flex-start;
+    align-items: stretch;
+    flex: 1 1 0;
+    gap: 8px;
   }
 
   .scope-row {
@@ -28,6 +35,13 @@
   .required-text {
     margin: 16px 0
   }
+
+  @media (max-width: 1500px) {
+    .communication-config {
+      flex-direction: column;
+      gap: 0;
+    }
+  }
 }
 
 :host ::ng-deep {

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html

@@ -28,7 +28,7 @@
   <div *ngFor="let mappingConfig of mappingsConfigFormArray.controls; let $index = index;
                last as isLast;" fxLayout="row" fxLayoutAlign="start center"
        fxLayoutGap="8px" [formGroup]="mappingConfig" class="mapping-list">
-    <div fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
+    <div class="tb-layout-fill" fxFlex fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start">
       <mat-form-field fxFlex="26">
         <mat-select formControlName="dataType" required>
           <mat-option *ngFor="let dataType of dataTypes" [value]="dataType">

ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.scss

@@ -15,13 +15,9 @@
  */
 :host {
   .mapping-config {
-    min-width: 518px;
-  }
-  .mapping-list {
-    padding-bottom: 8px;
-  }
 
-  .required-text {
-    margin: 14px 0;
+    .required-text {
+      margin: 14px 0;
+    }
   }
 }