From f87936951e28e18823c8743b3634f6f7d0d18b55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D1=80=D1=82=D1=91=D0=BC=20=D0=9C=D1=83=D1=84=D0=B0?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=BB=D0=BE=D0=B2?=
 <67755036+artemmufazalov@users.noreply.github.com>
Date: Mon, 10 Jun 2024 14:51:30 +0300
Subject: [PATCH] fix(AsyncReplication): fix table styles (#891)

---
 src/containers/App/App.scss                   | 34 +----------------
 .../TenantOverview/TenantOverview.scss        |  6 ---
 src/styles/mixins.scss                        | 38 +++++++++++++++++--
 3 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss
index 92a421a0a..1a3c4b65b 100644
--- a/src/containers/App/App.scss
+++ b/src/containers/App/App.scss
@@ -28,8 +28,6 @@ body,
 :root {
     --g-color-base-yellow-light: rgba(255, 199, 0, 0.15);
     --g-color-base-yellow-medium: rgba(255, 219, 77, 0.4);
-
-    --data-table-row-height: 40px;
 }
 
 .g-root {
@@ -74,42 +72,12 @@ body,
 .app {
     height: 100%;
     @include flex-container();
+    @include data-table-styles();
 
     &__main {
         overflow: auto;
         @include flex-container();
     }
-
-    .data-table {
-        width: 100%;
-        @include body-2-typography();
-
-        &__table {
-            max-width: 100%;
-
-            border-spacing: 0;
-            border-collapse: separate;
-        }
-    }
-
-    .data-table__th {
-        font-weight: bold;
-
-        border-top: unset;
-        border-right: unset;
-        border-left: unset;
-    }
-
-    .data-table__sticky .data-table__th,
-    .data-table__td {
-        height: var(--data-table-row-height);
-
-        vertical-align: middle;
-
-        border-top: unset;
-        border-right: unset;
-        border-left: unset;
-    }
 }
 
 .error {
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
index 34e6e5932..87b8e594f 100644
--- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
+++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
@@ -54,12 +54,6 @@
         &:not(:last-child) {
             margin-bottom: var(--diagnostics-section-margin);
         }
-
-        th {
-            height: 40px;
-
-            vertical-align: middle;
-        }
     }
 
     &__top-queries-row {
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index ed74f3e60..571b99130 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -94,13 +94,45 @@
     @include body-2-typography();
 }
 
-@mixin query-data-table() {
-    & .data-table {
+@mixin data-table-styles {
+    --data-table-row-height: 40px;
+    --data-table-cell-align: middle;
+    --data-table-head-align: middle;
+
+    .data-table {
+        @include body-2-typography();
+
         &__th,
         &__td {
-            vertical-align: middle;
+            height: var(--data-table-row-height);
+
+            border-top: unset;
+            border-right: unset;
+            border-left: unset;
         }
 
+        &__th {
+            font-weight: bold;
+        }
+
+        &__table {
+            border-spacing: 0;
+            border-collapse: separate;
+        }
+    }
+
+    // DataTable with moving head is actually made of two separate tables
+    // The second table has header with zero height, so it's actually invisible
+    // There should not be any height set for this header
+    .data-table__box_sticky-head_moving {
+        .data-table__th {
+            height: unset;
+        }
+    }
+}
+
+@mixin query-data-table() {
+    & .data-table {
         &__box {
             .data-table__table-wrapper {
                 padding-bottom: 20px;