Merge pull request #10062 from Dmitriymush/enhacements/device-profile-transport-config

Added html responsive 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

@@ -13,12 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../scss/constants';
+
 :host {
   .communication-config {
     border: 2px groove rgba(0, 0, 0, 0.25);
     border-radius: 4px;
     padding: 8px;
     min-width: 0;
+    flex-direction: column;
+    display: flex;
+    place-content: stretch flex-start;
+    align-items: stretch;
+    flex: 1;
+    gap: 0;
   }
 
   .scope-row {
@@ -28,6 +36,13 @@
   .required-text {
     margin: 16px 0
   }
+
+  @media #{$mat-gt-xmd} {
+    .communication-config {
+      flex-direction: row;
+      gap: 8px;
+    }
+  }
 }
 
 :host ::ng-deep {

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

@@ -19,8 +19,8 @@
   <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="100">
     <div fxFlex fxLayout="row" fxLayoutGap="8px">
       <label fxFlex="26" class="tb-title no-padding" translate>device-profile.snmp.data-type</label>
-      <label fxFlex="37" class="tb-title no-padding" translate>device-profile.snmp.data-key</label>
-      <label fxFlex="37" class="tb-title no-padding" translate>device-profile.snmp.oid</label>
+      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.data-key</label>
+      <label fxFlex="37" class="tb-title tb-required no-padding" translate>device-profile.snmp.oid</label>
       <span style="min-width: 40px" [fxShow]="!disabled"></span>
     </div>
   </div>
@@ -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;
+    }
   }
 }