From fcb214374ebd95d94785ac9ea3912c9fe7a02d87 Mon Sep 17 00:00:00 2001
From: Ruben Karapetyan <karapetyanrouben@gmail.com>
Date: Fri, 22 Jul 2022 21:36:27 +0400
Subject: [PATCH] [Fix] Improve top position calculation for table groups
 (#1992)

---
 .../ChartPanel/ChartPopover/ChartPopover.scss       |  5 +++++
 .../ui/src/components/CustomTable/TableColumn.tsx   | 13 +++++++++----
 aim/web/ui/src/styles/components/_autocomplete.scss |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/aim/web/ui/src/components/ChartPanel/ChartPopover/ChartPopover.scss b/aim/web/ui/src/components/ChartPanel/ChartPopover/ChartPopover.scss
index 8f674853c7..bba4814675 100644
--- a/aim/web/ui/src/components/ChartPanel/ChartPopover/ChartPopover.scss
+++ b/aim/web/ui/src/components/ChartPanel/ChartPopover/ChartPopover.scss
@@ -3,6 +3,11 @@
 .ChartPopover {
   pointer-events: none;
   z-index: 5!important;
+  height: 200px; // To not block table scroll
+
+  > *:first-of-type {
+    height: 200px; // To not block table scroll
+  }
 
   &__content {
     transform: none!important;
diff --git a/aim/web/ui/src/components/CustomTable/TableColumn.tsx b/aim/web/ui/src/components/CustomTable/TableColumn.tsx
index f23c621ec1..2b118aa47e 100644
--- a/aim/web/ui/src/components/CustomTable/TableColumn.tsx
+++ b/aim/web/ui/src/components/CustomTable/TableColumn.tsx
@@ -499,8 +499,9 @@ function Column({
                   break;
                 }
                 top +=
-                  ROW_CELL_SIZE_CONFIG[rowHeightMode].groupMargin +
-                  rowHeightMode;
+                  (ROW_CELL_SIZE_CONFIG[rowHeightMode].groupMargin ?? 6) +
+                  rowHeightMode +
+                  1;
                 if (expanded[key]) {
                   top += data[key].items.length * rowHeightMode;
                 }
@@ -619,13 +620,17 @@ function Column({
                     {expanded[groupKey] && (
                       <>
                         {data[groupKey]?.items?.map((item, i) => {
-                          let absoluteTop = 0;
+                          let absoluteTop =
+                            (ROW_CELL_SIZE_CONFIG[rowHeightMode].groupMargin ??
+                              6) + rowHeightMode;
                           let top = 0;
                           for (let key in data) {
                             if (key === groupKey) {
                               break;
                             }
-
+                            absoluteTop +=
+                              (ROW_CELL_SIZE_CONFIG[rowHeightMode]
+                                .groupMargin ?? 6) + rowHeightMode;
                             if (expanded[key]) {
                               absoluteTop +=
                                 data[key].items.length * rowHeightMode;
diff --git a/aim/web/ui/src/styles/components/_autocomplete.scss b/aim/web/ui/src/styles/components/_autocomplete.scss
index 971ca4f494..e08f405e9b 100644
--- a/aim/web/ui/src/styles/components/_autocomplete.scss
+++ b/aim/web/ui/src/styles/components/_autocomplete.scss
@@ -16,7 +16,7 @@
       padding: 0;
     }
 
-    .SelectForm__option {
+    .SelectForm__option, .Metrics__SelectForm__option {
       display: flex;
       width: 100%;
       overflow: hidden;