From c91066c438e863d9061f08650dead5d2e5939888 Mon Sep 17 00:00:00 2001
From: stdevman91 <stdevman91@gmail.com>
Date: Fri, 21 Aug 2026 13:39:10 +0300
Subject: [PATCH] Fix styles

---
 .../components/_fraud-summary-grid.scss            |  5 +++++
 .../fraud-summary-header.component.html            | 14 ++++++++------
 .../fraud-summary-header.component.scss            |  6 ++++++
 .../fraud-summary-header.component.ts              |  1 +
 .../fraud-summary-item.component.html              | 14 +++++++-------
 .../fraud-summary-item.component.scss              |  6 ++++--
 6 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 src/app/sections/analytics/components/base/components/fraud-summary-list/components/_fraud-summary-grid.scss
 create mode 100644 src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.scss

diff --git a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/_fraud-summary-grid.scss b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/_fraud-summary-grid.scss
new file mode 100644
index 00000000..1d7263c4
--- /dev/null
+++ b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/_fraud-summary-grid.scss
@@ -0,0 +1,5 @@
+@mixin fraud-summary-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, 140px);
+    align-items: center;
+}
diff --git a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.html b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.html
index e23f94e8..169ba289 100644
--- a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.html
+++ b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.html
@@ -1,8 +1,10 @@
 <fb-list-header>
-    <div class="fb-body-2" fxFlex>Status</div>
-    <div class="fb-body-2" fxFlex>Template</div>
-    <div class="fb-body-2" fxFlex>Checked rule</div>
-    <div class="fb-body-2" fxFlex="140px">Sum</div>
-    <div class="fb-body-2" fxFlex="140px">Count</div>
-    <div class="fb-body-2" fxFlex="140px">Ratio</div>
+    <div class="fraud-summary-grid" [style.column-gap]="layoutGapM">
+        <div class="fb-body-2">Status</div>
+        <div class="fb-body-2">Template</div>
+        <div class="fb-body-2">Checked rule</div>
+        <div class="fb-body-2">Sum</div>
+        <div class="fb-body-2">Count</div>
+        <div class="fb-body-2">Ratio</div>
+    </div>
 </fb-list-header>
diff --git a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.scss b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.scss
new file mode 100644
index 00000000..dec3d988
--- /dev/null
+++ b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.scss
@@ -0,0 +1,6 @@
+@import '../fraud-summary-grid';
+
+.fraud-summary-grid {
+    @include fraud-summary-grid;
+    width: 100%;
+}
diff --git a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.ts b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.ts
index 5e110dcf..8aefc70b 100644
--- a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.ts
+++ b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-header/fraud-summary-header.component.ts
@@ -5,6 +5,7 @@ import { LAYOUT_GAP_M } from '../../../../../../../../tokens';
 @Component({
     selector: 'fb-fraud-summary-header',
     templateUrl: 'fraud-summary-header.component.html',
+    styleUrls: ['fraud-summary-header.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FraudSummaryHeaderComponent {
diff --git a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.html b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.html
index 3540ad0e..a576197f 100644
--- a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.html
+++ b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.html
@@ -1,8 +1,8 @@
-<mat-card class="fb-list-item" fxLayout fxFlexFill fxLayoutAlign="center center" [fxLayoutGap]="layoutGapM">
-    <div class="fb-body-2" fxFlex>{{ summary.status }}</div>
-    <div class="fb-body-2 wrap" fxFlex>{{ summary.template }}</div>
-    <div class="fb-body-2 wrap" fxFlex>{{ summary.checkedRule }}</div>
-    <div class="fb-body-2" fxFlex="140px">{{ summary.summary.sum }}</div>
-    <div class="fb-body-2" fxFlex="140px">{{ summary.summary.count }}</div>
-    <div class="fb-body-2" fxFlex="140px">{{ numberFormat(summary.summary.ratio) | number : '.1-4' }}</div>
+<mat-card class="fb-list-item fraud-summary-grid" [style.column-gap]="layoutGapM">
+    <div class="fb-body-2">{{ summary.status }}</div>
+    <div class="fb-body-2 wrap">{{ summary.template }}</div>
+    <div class="fb-body-2 wrap">{{ summary.checkedRule }}</div>
+    <div class="fb-body-2">{{ summary.summary.sum }}</div>
+    <div class="fb-body-2">{{ summary.summary.count }}</div>
+    <div class="fb-body-2">{{ numberFormat(summary.summary.ratio) | number : '.1-4' }}</div>
 </mat-card>
diff --git a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.scss b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.scss
index 9caa2135..e9884051 100644
--- a/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.scss
+++ b/src/app/sections/analytics/components/base/components/fraud-summary-list/components/fraud-summary-item/fraud-summary-item.component.scss
@@ -1,9 +1,11 @@
+@import '../fraud-summary-grid';
+
 .fb-list-item {
     height: 48px !important;
 }
 
-.fb-list-header {
-    height: 48px !important;
+.fraud-summary-grid {
+    @include fraud-summary-grid;
 }
 
 .wrap {