fix: truncated text

paradigmxyz · Oct 3, 2023 · 4e802c2 · 4e802c2
1 parent 8729a28
commit 4e802c2
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/design-system/components/Text.tsx b/src/design-system/components/Text.tsx
@@ -3,6 +3,7 @@ import {
   createContext,
   forwardRef,
   useContext,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -176,20 +177,31 @@ export const TextTruncated = forwardRef<HTMLDivElement, TextTruncatedProps>(
     const wrapperRef = useRef(null)
     const [width, setWidth] = useState<number | undefined>()
 
+    const [mounted, setMounted] = useState(false)
+    useEffect(() => {
+      setTimeout(() => setMounted(true), 16)
+    }, [])
+
     useLayoutEffect(() => {
       setWidth(
         ((wrapperRef.current as any).getBoundingClientRect() as DOMRectReadOnly)
           .width,
       )
     }, [])
-    useResizeObserver(wrapperRef, (entry) => setWidth(entry.contentRect.width))
+    useResizeObserver(wrapperRef, (entry) =>
+      mounted ? setWidth(entry.contentRect.width) : undefined,
+    )
 
     const truncatedText = useMemo(() => {
       const letterWidth = fontAttributes[size].letterWidth
-      return typeof width === 'number'
+
+      const width_ = width
+        ? width - parseInt(heightForSize[size].replace('px', ''))
+        : undefined
+      return typeof width_ === 'number'
         ? truncate(children || '', {
-            start: Math.floor(width / letterWidth) / 2 + 1,
-            end: Math.floor(width / letterWidth) / 2 - 1,
+            start: Math.floor(width_ / letterWidth) / 2 + 1,
+            end: Math.floor(width_ / letterWidth) / 2 - 1,
           })
         : children
     }, [children, size, width])
@@ -205,12 +217,7 @@ export const TextTruncated = forwardRef<HTMLDivElement, TextTruncatedProps>(
         weight={weight}
         testId={testId}
       >
-        <Box
-          style={{
-            width: `calc(100% - ${heightForSize[size]})`,
-          }}
-          ref={wrapperRef}
-        >
+        <Box ref={wrapperRef}>
           <Box
             as="span"
             className={[tabular && styles.tabular, styles.overflow]}
@@ -220,7 +227,7 @@ export const TextTruncated = forwardRef<HTMLDivElement, TextTruncatedProps>(
             <Box
               position="absolute"
               style={{
-                right: -(parseInt(heightForSize[size].replace('px', '')) + 2),
+                right: -parseInt(heightForSize[size].replace('px', '')),
                 top: -3,
                 width: heightForSize[size],
               }}

diff --git a/src/screens/account-details.tsx b/src/screens/account-details.tsx
@@ -216,7 +216,7 @@ function TokenRow({
                 </Row>
                 <Row>
                   <Inline>
-                    <Box style={{ maxWidth: '156px' }}>
+                    <Box paddingRight="16px" style={{ maxWidth: '140px' }}>
                       <Tooltip label={tokenAddress}>
                         <Text.Truncated color="text/tertiary" size="11px">
                           {tokenAddress}
@@ -302,7 +302,7 @@ function BalanceInput({
             <Spinner size="15px" />
           </Column>
         )}
-        <Column width="4/5">
+        <Column alignHorizontal="right" width="4/5">
           <Input
             onChange={(e) => setValue(e.target.value)}
             onClick={(e) => e.stopPropagation()}
@@ -320,7 +320,7 @@ function BalanceInput({
               }
             }}
             height="24px"
-            style={{ textAlign: 'right' }}
+            style={{ maxWidth: '180px', textAlign: 'right' }}
             value={value}
           />
         </Column>