UI: added improvements and refactoring for snmp

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

@@ -13,19 +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: row;
+    flex-direction: column;
-    box-sizing: border-box;
     display: flex;
     place-content: stretch flex-start;
     align-items: stretch;
-    flex: 1 1 0;
+    flex: 1;
-    gap: 8px;
+    gap: 0;
   }
 
   .scope-row {
@@ -36,10 +37,10 @@
     margin: 16px 0
   }
 
-  @media (max-width: 1650px) {
+  @media #{$mat-gt-xmd} {
     .communication-config {
-      flex-direction: column;
+      flex-direction: row;
-      gap: 0;
+      gap: 8px;
     }
   }
 }

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 tb-required 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.oid</label>
       <span style="min-width: 40px" [fxShow]="!disabled"></span>
     </div>
   </div>