diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html
index 6e08046a22..8a1d86f4d6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html
@@ -37,23 +37,27 @@
       </mat-select>
     </mat-form-field>
   </div>
-  <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="8px">
-    <mat-checkbox formControlName="showMin" fxFlex="48">
+  <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+    <mat-checkbox formControlName="showMin" fxFlex>
       {{ 'legend.show-min' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="showMax" fxFlex="48">
+    <mat-checkbox formControlName="showMax" fxFlex>
       {{ 'legend.show-max' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="showAvg" fxFlex="48">
+  </div>
+  <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+    <mat-checkbox formControlName="showAvg" fxFlex>
       {{ 'legend.show-avg' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="showTotal" fxFlex="48">
+    <mat-checkbox formControlName="showTotal" fxFlex>
       {{ 'legend.show-total' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="showLatest" fxFlex="48">
+  </div>
+  <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+    <mat-checkbox formControlName="showLatest" fxFlex>
       {{ 'legend.show-latest' | translate }}
     </mat-checkbox>
-    <mat-checkbox formControlName="sortDataKeys" fxFlex="48">
+    <mat-checkbox formControlName="sortDataKeys" fxFlex>
       {{ 'legend.sort-legend' | translate }}
     </mat-checkbox>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
index a1d4e8b5b6..c9a12d68d9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/common-maps-utils.ts
@@ -116,11 +116,11 @@ const linkActionRegex = /<link-act name=['"]([^['"]*)['"]>([^<]*)<\/link-act>/g;
 const buttonActionRegex = /<button-act name=['"]([^['"]*)['"]>([^<]*)<\/button-act>/g;
 
 function createLinkElement(actionName: string, actionText: string): string {
-  return `<a href="javascript:void(0);" class="tb-custom-action" data-action-name=${actionName}>${actionText}</a>`;
+  return `<a href="javascript:void(0);" class="tb-custom-action" data-action-name="${actionName}">${actionText}</a>`;
 }
 
 function createButtonElement(actionName: string, actionText: string) {
-  return `<button mat-button class="tb-custom-action" data-action-name=${actionName}>${actionText}</button>`;
+  return `<button mat-button class="tb-custom-action" data-action-name="${actionName}">${actionText}</button>`;
 }
 
 function parseTemplate(template: string, data: FormattedData,