(superset) 22/28: fix(dashboard): table chart drag preview overflowing container (#27308)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch 4.0
in repository https://gitbox.apache.org/repos/asf/superset.git

commit f5750dda8c8cb194ca3e6c465eb72793f6379bc8
Author: Ross Mabbett <92...@users.noreply.github.com>
AuthorDate: Thu Feb 29 17:37:55 2024 -0500

    fix(dashboard): table chart drag preview overflowing container (#27308)
    
    (cherry picked from commit ad3995daf62984bc0652c155643e0aca3a2840a0)
---
 superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
index 185b4c08c6..bce458dfe6 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
@@ -74,6 +74,12 @@ const defaultProps = {
 const DragDroppableStyles = styled.div`
   ${({ theme }) => css`
     position: relative;
+    /*
+      Next line is a workaround for a bug in react-dnd where the drag
+      preview expands outside of the bounds of the drag source card, see:
+      https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628
+    */
+    transform: translate3d(0, 0, 0);
 
     &.dragdroppable--dragging {
       opacity: 0.2;