fix: tooltip overflow and cursor (#3271)

* fix: tooltip cursor

* fix: only clip dialog

* nit: clean up class name

src/lib/components/Dialog.tsx

@@ -106,7 +106,7 @@ export default function Dialog({ color, children, onClose = () => void 0 }: Dial
     context.element &&
     createPortal(
       <ThemeProvider>
-        <Modal className="dialog" color={color} ref={dialog}>
+        <Modal color={color} ref={dialog}>
           <OnCloseContext.Provider value={onClose}>{children}</OnCloseContext.Provider>
         </Modal>
       </ThemeProvider>,

src/lib/components/Tooltip.tsx

@@ -21,9 +21,7 @@ export function useTooltip(): [boolean, (show: boolean) => void, TooltipHandlers
 }
 
 const IconTooltip = styled(IconButton)`
-  :hover {
   cursor: help;
-  }
 `
 
 interface TooltipProps {

src/lib/components/Widget.tsx

@@ -10,18 +10,20 @@ import styled, { keyframes, Theme, ThemeProvider } from 'lib/theme'
 import { PropsWithChildren, StrictMode, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 
-import { Provider as DialogProvider } from './Dialog'
+import { Modal, Provider as DialogProvider } from './Dialog'
 import ErrorBoundary, { ErrorHandler } from './Error/ErrorBoundary'
 import WidgetPropValidator from './Error/WidgetsPropsValidator'
 import Web3Provider from './Web3Provider'
 
 const slideDown = keyframes`
   to {
+    height: 0;
     top: calc(100% - 0.25em);
   }
 `
 const slideUp = keyframes`
   from {
+    height: 0;
     top: calc(100% - 0.25em);
   }
 `
@@ -41,15 +43,10 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
   font-variant: none;
   height: 368px;
   min-width: 300px;
-  overflow-y: hidden;
   padding: 0.25em;
   position: relative;
   width: ${({ width }) => width && (isNaN(Number(width)) ? width : `${width}px`)};
 
-  @supports (overflow: clip) {
-    overflow-y: clip;
-  }
-
   * {
     box-sizing: border-box;
     font-family: ${({ theme }) => theme.fontFamily};
@@ -60,11 +57,11 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
     }
   }
 
-  .dialog {
+  ${Modal} {
     animation: ${slideUp} 0.25s ease-in-out;
   }
 
-  .dialog.${UNMOUNTING} {
+  ${Modal}.${UNMOUNTING} {
     animation: ${slideDown} 0.25s ease-in-out;
   }
 `