UI: fix ui

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

@@ -59,10 +59,10 @@
         </mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
+        <mat-checkbox formControlName="propagate" style="display: block;">
           {{ 'device-profile.propagate-alarm' | translate }}
         </mat-checkbox>
-        <section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
+        <section *ngIf="alarmFormGroup.get('propagate').value === true">
           <mat-form-field floatLabel="always" class="mat-block">
             <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
             <mat-chip-grid #relationTypesChipList [disabled]="disabled">
@@ -82,10 +82,10 @@
             <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
           </mat-form-field>
         </section>
-        <mat-checkbox formControlName="propagateToOwner" style="display: block; padding-bottom: 16px;">
+        <mat-checkbox formControlName="propagateToOwner" style="display: block;">
           {{ 'device-profile.propagate-alarm-to-owner' | translate }}
         </mat-checkbox>
-        <mat-checkbox formControlName="propagateToTenant" style="display: block; padding-bottom: 16px;">
+        <mat-checkbox formControlName="propagateToTenant" style="display: block;">
           {{ 'device-profile.propagate-alarm-to-tenant' | translate }}
         </mat-checkbox>
       </ng-template>

ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html

@@ -31,7 +31,7 @@
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>device-profile.provision-device-key</mat-label>
       <input matInput formControlName="provisionDeviceKey" required/>
-      <button mat-button matSuffix mat-icon-button
+      <button matSuffix mat-icon-button
               ngxClipboard
               [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
               (cbOnSuccess)="onProvisionCopied(true)"
@@ -46,7 +46,7 @@
     <mat-form-field fxFlex class="mat-block">
       <mat-label translate>device-profile.provision-device-secret</mat-label>
       <input matInput formControlName="provisionDeviceSecret" required/>
-      <button mat-button matSuffix mat-icon-button
+      <button matSuffix mat-icon-button
               ngxClipboard
               [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
               (cbOnSuccess)="onProvisionCopied(false)"

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html

@@ -24,19 +24,19 @@
   <mat-form-field floatLabel="always" class="mat-block" style="padding-top: 8px;"
                   *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
     <mat-label translate>device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names</mat-label>
-    <mat-chip-list #attrMetricNamesChipList formControlName="sparkplugAttributesMetricNames">
-      <mat-chip
+    <mat-chip-grid #attrMetricNamesChipList formControlName="sparkplugAttributesMetricNames">
+      <mat-chip-row
         *ngFor="let name of mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;"
         (removed)="removeAttributeMetricName(name)">
         {{name}}
         <mat-icon matChipRemove>close</mat-icon>
-      </mat-chip>
+      </mat-chip-row>
       <input matInput type="text" placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
              [matChipInputFor]="attrMetricNamesChipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              matChipInputAddOnBlur
              (matChipInputTokenEnd)="addAttributeMetricName($event)">
-    </mat-chip-list>
+    </mat-chip-grid>
     <mat-hint innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></mat-hint>
   </mat-form-field>
 </form>

ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html

@@ -17,7 +17,7 @@
 -->
 <div fxLayout="column" class="mat-content mat-padding">
   <label class="tb-title" translate>entity.columns-to-display</label>
-  <mat-checkbox style="padding-bottom: 8px;" [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
+  <mat-checkbox [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
                 (ngModelChange)="update()">
     {{ column.title }}
   </mat-checkbox>