Merge pull request #1740 from RafaelTaranto/backport/button-popper-position

LAM-553 fix: transaction details ID button popper positioning

new-lamassu-admin/src/components/Popper.js

@@ -105,20 +105,29 @@ const Popover = ({
 
   const classes = useStyles()
 
-  const arrowClasses = {
+  const getArrowClasses = placement => ({
     [classes.arrow]: true,
-    [classes.arrowBottom]: props.placement === 'bottom',
+    [classes.arrowBottom]: placement === 'bottom',
-    [classes.arrowTop]: props.placement === 'top',
+    [classes.arrowTop]: placement === 'top',
-    [classes.arrowRight]: props.placement === 'right',
+    [classes.arrowRight]: placement === 'right',
-    [classes.arrowLeft]: props.placement === 'left'
+    [classes.arrowLeft]: placement === 'left'
+  })
+
+  const flipPlacements = {
+    top: ['bottom'],
+    bottom: ['top'],
+    left: ['right'],
+    right: ['left']
   }
 
-  const modifiers = R.merge(props.modifiers, {
+  const modifiers = R.mergeDeepLeft(props.modifiers, {
     flip: {
-      enabled: false
+      enabled: R.defaultTo(false, props.flip),
+      allowedAutoPlacements: flipPlacements[props.placement],
+      boundary: 'clippingParents'
     },
     preventOverflow: {
-      enabled: true,
+      enabled: R.defaultTo(true, props.preventOverflow),
       boundariesElement: 'scrollParent'
     },
     offset: {
@@ -126,7 +135,7 @@ const Popover = ({
       offset: '0, 10'
     },
     arrow: {
-      enabled: true,
+      enabled: R.defaultTo(true, props.showArrow),
       element: arrowRef
     },
     computeStyle: {
@@ -134,6 +143,12 @@ const Popover = ({
     }
   })
 
+  if (props.preventOverflow === false) {
+    modifiers.hide = {
+      enabled: false
+    }
+  }
+
   return (
     <>
       <MaterialPopper
@@ -141,10 +156,15 @@ const Popover = ({
         modifiers={modifiers}
         className={classes.popover}
         {...props}>
-        <Paper className={classnames(classes.root, className)}>
+        {({ placement }) => (
-          <span className={classnames(arrowClasses)} ref={setArrowRef} />
+          <Paper className={classnames(classes.root, className)}>
-          {children}
+            <span
-        </Paper>
+              className={classnames(getArrowClasses(placement))}
+              ref={setArrowRef}
+            />
+            {children}
+          </Paper>
+        )}
       </MaterialPopper>
     </>
   )

new-lamassu-admin/src/components/buttons/IDButton.js

@@ -56,7 +56,8 @@ const styles = {
     alignItems: 'center',
     borderRadius: 4,
     '& img': {
-      maxHeight: 145
+      height: 145,
+      minWidth: 200
     }
   }
 }
@@ -127,7 +128,8 @@ const IDButton = memo(
           anchorEl={anchorEl}
           onClose={handleClose}
           arrowSize={3}
-          placement="top">
+          placement="top"
+          flip>
           <div className={classes.popoverContent}>
             <div>{children}</div>
           </div>