[Fix] Improve top position calculation for table groups (#1992)

aimhubio · Jul 22, 2022 · fcb2143 · fcb2143
1 parent d060769
commit fcb2143
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -16,7 +16,7 @@
       padding: 0;
     }
 
-    .SelectForm__option {
+    .SelectForm__option, .Metrics__SelectForm__option {
       display: flex;
       width: 100%;
       overflow: hidden;