Skip to content

Commit 9f08e2f

Browse files
committed
fix(tx): improve show more/less overflow detection accuracy
Use ResizeObserver instead of effect-based measurement so the check reacts to actual DOM size changes. Add a small tolerance to prevent the button from appearing when only divider borders overflow.
1 parent 91c19c1 commit 9f08e2f

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

src/pages/network/components/TxItem/InputDataSection.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const DATA_VIEW_PARAM = 'dataView'
1818
const VIEW_MODES = ['default', 'json', 'hex', 'base64'] as const
1919
type ViewMode = (typeof VIEW_MODES)[number]
2020

21+
const OVERFLOW_TOLERANCE = 4
2122
const JSON_OPTION: Option<ViewMode> = { label: 'JSON', value: 'json' }
2223
const HEX_OPTION: Option<ViewMode> = { label: 'Hex', value: 'hex' }
2324
const BASE64_OPTION: Option<ViewMode> = { label: 'Base64', value: 'base64' }
@@ -139,10 +140,19 @@ export default function InputDataSection({
139140
}, [decodedInputJson, txHash])
140141

141142
useEffect(() => {
142-
if (contentRef.current && !isExpanded) {
143-
setIsOverflowing(contentRef.current.scrollHeight > contentRef.current.clientHeight)
143+
const el = contentRef.current
144+
if (!el || isExpanded) return undefined
145+
146+
const checkOverflow = () => {
147+
setIsOverflowing(el.scrollHeight - el.clientHeight > OVERFLOW_TOLERANCE)
144148
}
145-
}, [decodedInputJson, viewMode, isExpanded])
149+
150+
const observer = new ResizeObserver(checkOverflow)
151+
observer.observe(el)
152+
checkOverflow()
153+
154+
return () => observer.disconnect()
155+
}, [viewMode, isExpanded])
146156

147157
if (!showExtendedDetails || !inputData || inputData.length === 0) return null
148158

0 commit comments

Comments
 (0)