Merge pull request #432 from DataRecce/feature/drc-647-bug-fix-the-la…

…yout-problem-in-the-check-and-lineage-ui [Bug] Fix the layout problem in the check and lineage UI
DataRecce · Sep 26, 2024 · 5b5478b · 5b5478b
2 parents f4436a7 + 90bdb34
commit 5b5478b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/js/src/components/check/CheckDetail.tsx b/js/src/components/check/CheckDetail.tsx
@@ -320,6 +320,7 @@ export const CheckDetail = ({ checkId }: CheckDetailProps) => {
 
           <Tooltip
             label={check?.is_checked ? "Mark as pending" : "Mark as approved"}
+            placement="bottom-end"
           >
             <Button
               size="sm"

diff --git a/js/src/components/check/CheckList.tsx b/js/src/components/check/CheckList.tsx
@@ -105,21 +105,33 @@ export const CheckList = ({
                 draggableId={check.check_id}
                 index={index}
               >
-                {(provided) => (
-                  <Flex
-                    ref={provided.innerRef}
-                    {...provided.draggableProps}
-                    {...provided.dragHandleProps}
-                    w="full"
-                  >
-                    <ChecklistItem
-                      key={check.check_id}
-                      check={check}
-                      selected={check.check_id === selectedItem}
-                      onSelect={onCheckSelected}
-                    />
-                  </Flex>
-                )}
+                {(provided, snapshot) => {
+                  // see https://github.com/atlassian/react-beautiful-dnd/issues/1881#issuecomment-691237307
+                  if (snapshot.isDragging) {
+                    const props = provided.draggableProps as any;
+                    const offset = { x: 0, y: 80 };
+                    const x = props.style.left - offset.x;
+                    const y = props.style.top - offset.y;
+                    props.style.left = x;
+                    props.style.top = y;
+                  }
+
+                  return (
+                    <Flex
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      w="full"
+                    >
+                      <ChecklistItem
+                        key={check.check_id}
+                        check={check}
+                        selected={check.check_id === selectedItem}
+                        onSelect={onCheckSelected}
+                      />
+                    </Flex>
+                  );
+                }}
               </Draggable>
             ))}
             {provided.placeholder}

diff --git a/js/src/components/lineage/NodeFilter.tsx b/js/src/components/lineage/NodeFilter.tsx
@@ -295,7 +295,7 @@ const MoreActionMenu = (props: NodeFilterProps) => {
   );
 
   return (
-    <Menu>
+    <Menu placement="bottom-end">
       <MenuButton as={Button} size={"xs"} isDisabled={props.isDisabled}>
         ...
       </MenuButton>