tweak: styles

Author: jxom

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useMemo } from 'react'
+import { type ReactNode, useLayoutEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { type Hex, formatGwei } from 'viem'
 
@@ -128,6 +128,13 @@ function HomeButton() {
 function Account() {
   const { account } = useAccountStore()
   if (!account) return null
+
+  // Hack to bypass truncated text mounting issues.
+  const [key, setKey] = useState(0)
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => setKey((key) => key + 1))
+  }, [])
+
   return (
     <Link to="/" style={{ height: '100%' }}>
       <Box
@@ -143,7 +150,9 @@ function Account() {
           {account && (
             <HeaderItem label="Account">
               <Tooltip label={account.address}>
-                <Text.Truncated size="11px">{account.address}</Text.Truncated>
+                <Text.Truncated key={key} size="11px">
+                  {account.address}
+                </Text.Truncated>
               </Tooltip>
             </HeaderItem>
           )}

src/design-system/components/Text.css.ts

@@ -38,8 +38,12 @@ export const tabular = style({
   letterSpacing: '0px',
 })
 
-export const overflow = style({
+export const ellipsis = style({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
 })
+
+export const overflow = style({
+  overflow: 'visible',
+})

src/design-system/components/Text.tsx

@@ -92,6 +92,7 @@ export const TextWrapper = forwardRef<HTMLDivElement, TextWrapperProps>(
 )
 
 export type TextProps = TextWrapperProps & {
+  overflow?: boolean
   tabular?: boolean
 }
 
@@ -103,6 +104,7 @@ export const TextBase = forwardRef<HTMLDivElement, TextProps>(
       children,
       color,
       family,
+      overflow,
       size,
       style,
       tabular = false,
@@ -128,7 +130,11 @@ export const TextBase = forwardRef<HTMLDivElement, TextProps>(
       >
         <Box
           as="span"
-          className={[tabular && styles.tabular, !wrap && styles.overflow]}
+          className={[
+            tabular && styles.tabular,
+            !wrap && styles.ellipsis,
+            overflow && styles.overflow,
+          ]}
           display={!wrap ? 'block' : undefined}
         >
           {children || '‎'}
@@ -185,15 +191,10 @@ export const TextTruncated = forwardRef<HTMLDivElement, TextTruncatedProps>(
     }, [])
 
     useLayoutEffect(() => {
-      setTimeout(() => {
-        setWidth(
-          (
-            (
-              wrapperRef.current as any
-            ).getBoundingClientRect() as DOMRectReadOnly
-          ).width,
-        )
-      }, 16)
+      setWidth(
+        ((wrapperRef.current as any).getBoundingClientRect() as DOMRectReadOnly)
+          .width,
+      )
     }, [])
     useResizeObserver(wrapperRef, (entry) =>
       mounted ? setWidth(entry.contentRect.width) : undefined,
@@ -227,7 +228,7 @@ export const TextTruncated = forwardRef<HTMLDivElement, TextTruncatedProps>(
         <Box ref={wrapperRef}>
           <Box
             as="span"
-            className={[tabular && styles.tabular, styles.overflow]}
+            className={[tabular && styles.tabular, styles.ellipsis]}
             position="relative"
           >
             {truncatedText || '‎'}

src/screens/index.tsx

@@ -464,8 +464,14 @@ function Blocks() {
                           TIMESTAMP
                         </Text>
                       </Column>
-                      <Column alignVertical="center">
-                        <Text color="text/tertiary" size="9px" wrap={false}>
+                      <Column width="1/5" alignVertical="center">
+                        <Text
+                          color="text/tertiary"
+                          size="9px"
+                          overflow
+                          wrap={false}
+                          style={{ overflow: 'visible' }}
+                        >
                           TRANSACTIONS
                         </Text>
                       </Column>
@@ -519,7 +525,7 @@ function Blocks() {
                           </Text>
                         )}
                       </Column>
-                      <Column alignVertical="center">
+                      <Column width="1/5" alignVertical="center">
                         <Text size="12px">
                           {block.transactions.length || '0'}
                         </Text>