fix(AsyncReplication): fix table styles (#891)

Author: artemmufazalov

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 {

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 {

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;