From a1f248a6e94b0a0247af9afadeb7e9b5e902bedf Mon Sep 17 00:00:00 2001
From: fe-dev <Dgerik2015@gmail.com>
Date: Mon, 11 Jul 2022 14:24:23 +0300
Subject: [PATCH] UI: Fix legend layout

---
 .../widget/legend-config.component.html        | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

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>