Merge pull request #37 from concord-consortium/188114776-fix-dragging…

…-bug Fix dropdown icon issue that was causing dragging bug. (PT-188114776)
concord-consortium · Aug 26, 2024 · e044fcb · e044fcb
2 parents d7c3832 + d880570
commit e044fcb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/src/assets/dropdown-arrow-icon.svg b/src/assets/dropdown-arrow-icon.svg
diff --git a/src/components/draggable-table-tags.tsx b/src/components/draggable-table-tags.tsx
@@ -99,11 +99,17 @@ export const DraggagleTableHeader: React.FC<DraggagleTableHeaderProps> = ({colle
         onMouseLeave={() => setShowDropdownIcon(false)}
         onClick={handleShowHeaderMenu}
       >
-        {children}
-        {showDropdownIcon &&
-          <DropdownIcon onClick={handleShowHeaderMenu}
-                        style={{position: "absolute", right: 0, top: -2}}/>
-        }
+        <div className={css.thChildContainer}>
+          <div>{children}</div>
+          {showDropdownIcon &&
+            <div className={css.dropdownIcon}>
+              <DropdownIcon
+                onClick={handleShowHeaderMenu}
+                className={css.dropdownIcon}
+              />
+            </div>
+          }
+        </div>
       </th>
       { showHeaderMenu && tableContainer && headerPos &&
           createPortal(

diff --git a/src/components/tables.scss b/src/components/tables.scss
@@ -280,3 +280,21 @@ table.draggableTableContainer {
     padding: 5px;
   }
 }
+
+.thChildContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 15px;
+  width: 100%;
+  gap: 5px;
+  .dropdownIcon {
+    &:hover {
+      cursor: pointer;
+    }
+    svg {
+      width: 10px;
+    }
+  }
+}