diff --git a/packages/beacon-ui/src/components/toast/index.tsx b/packages/beacon-ui/src/components/toast/index.tsx index 6b3a223ea..a28d10b52 100644 --- a/packages/beacon-ui/src/components/toast/index.tsx +++ b/packages/beacon-ui/src/components/toast/index.tsx @@ -50,6 +50,8 @@ const Toast: React.FC = (props: ToastProps) => { setPosition([mx, my]) }) + const isMobile = isMobileOS(window) + useEffect(() => { if (isRequestSentToast) { setShowMoreInfo(false) @@ -65,7 +67,8 @@ const Toast: React.FC = (props: ToastProps) => { position: 'absolute', transform: `translate3d(${x}px, ${y}px, 0)`, // Required - touchAction: 'none' + touchAction: 'none', + minWidth: !isMobile ? 460 : undefined }} className={props.open ? 'toast-wrapper-show' : 'toast-wrapper-hide'} {...bindDrag()} diff --git a/packages/beacon-ui/src/components/toast/styles.css b/packages/beacon-ui/src/components/toast/styles.css index 93c857327..4d9cc5c3c 100644 --- a/packages/beacon-ui/src/components/toast/styles.css +++ b/packages/beacon-ui/src/components/toast/styles.css @@ -1,5 +1,6 @@ .toast-wrapper-show { user-select: none; + cursor: move; max-width: 460px; overflow: hidden; background-color: white; @@ -32,7 +33,6 @@ } .toast-header { - cursor: move; padding: 0px 0.6em 0px 1.2em; display: flex; align-items: center;