From 6f026ecd2a90a8386711b6ddde3250e07bed264b Mon Sep 17 00:00:00 2001
From: Juraj Piar <juraj@iovlabs.org>
Date: Mon, 30 Nov 2020 13:46:26 +0000
Subject: [PATCH] fix(molecule): wrapps tooltip text overflow

---
 src/components/molecules/CopyTextTooltip.tsx | 23 +++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/CopyTextTooltip.tsx b/src/components/molecules/CopyTextTooltip.tsx
index c10d6ae3..6502d38b 100644
--- a/src/components/molecules/CopyTextTooltip.tsx
+++ b/src/components/molecules/CopyTextTooltip.tsx
@@ -13,10 +13,13 @@ const useStyles = makeStyles(() => ({
   tooltipTitle: {
     display: 'flex',
     alignItems: 'center',
+    overflowWrap: 'anywhere',
   },
 }))
 
-const CopyTextTooltip: FC<CopyTextTooltipProps> = ({ displayElement, fullText }) => {
+const CopyTextTooltip: FC<CopyTextTooltipProps> = (
+  { displayElement, fullText },
+) => {
   const [isCopied, setIsCopied] = useState(false)
 
   const classes = useStyles()
@@ -30,17 +33,21 @@ const CopyTextTooltip: FC<CopyTextTooltipProps> = ({ displayElement, fullText })
     </div>
   )
 
+  const onClickHandle = (): void => {
+    navigator.clipboard.writeText(fullText)
+      .then(() => { setIsCopied(true) })
+  }
+
+  const onCloseHandle = (): void => {
+    setIsCopied(false)
+  }
+
   return (
     <Tooltip
       interactive
       title={isCopied ? <Typography variant="body2">Copied!</Typography> : tooltipContent}
-      onClick={() => {
-        navigator.clipboard.writeText(fullText)
-          .then(() => { setIsCopied(true) })
-      }}
-      onClose={() => {
-        setIsCopied(false)
-      }}
+      onClick={onClickHandle}
+      onClose={onCloseHandle}
     >
       {displayElement}
     </Tooltip>