Show LongDataDisplay controls only when needed

.changelog/1287.bugfix.md

@@ -0,0 +1 @@
+Show LongDataDisplay controls only when needed

src/app/components/LongDataDisplay/index.tsx

@@ -1,47 +1,81 @@
-import Collapse from '@mui/material/Collapse'
-import Link from '@mui/material/Link'
-import { FC, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+import { COLORS } from '../../../styles/theme/colors'
 
-export const LongDataDisplay: FC<{ data: string; threshold: number; fontWeight?: number }> = ({
+const StyledButton = styled(Button)(({ theme }) => ({
+  color: COLORS.brandDark,
+  fontWeight: 700,
+  minWidth: 'auto',
+  height: 'auto',
+  padding: 0,
+  [theme.breakpoints.down('sm')]: {
+    margin: theme.spacing(3, 0, 0, 0),
+  },
+  [theme.breakpoints.up('sm')]: {
+    margin: theme.spacing(4, 0, 0, 0),
+  },
+  '&&:hover, &&:active, &&:focus-visible': {
+    color: COLORS.brandDark,
+    textDecoration: 'none',
+    borderRadius: 0,
+  },
+}))
+
+const lineHeight = 22
+
+export const LongDataDisplay: FC<{ data: string; fontWeight?: number; collapsedLinesNumber?: number }> = ({
   data,
-  threshold,
   fontWeight = 700,
+  collapsedLinesNumber = 2,
 }) => {
   const { t } = useTranslation()
-  const [showData, setShowData] = useState(false)
-  const needsHiding = data.length > threshold
-  if (!needsHiding) {
-    return (
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+  const textRef = useRef<HTMLDivElement | null>(null)
+  const collapsedContainerMaxHeight = collapsedLinesNumber * lineHeight
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const isOverflow = textRef.current.scrollHeight > textRef.current.clientHeight
+        setIsOverflowing(isOverflow)
+      }
+    }
+
+    checkOverflow()
+    const handleResize = () => {
+      checkOverflow()
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [data])
+
+  return (
+    <div>
       <Typography
         variant="mono"
+        ref={textRef}
         sx={{
           fontWeight,
+          maxHeight: isExpanded ? 'none' : collapsedContainerMaxHeight,
+          overflow: 'hidden',
+          lineHeight: `${lineHeight}px`,
           overflowWrap: 'anywhere',
+          display: '-webkit-box',
+          '-webkit-line-clamp': isExpanded ? 'none' : `${collapsedLinesNumber}`, // keep it as string to avoid MUI adding px
+          '-webkit-box-orient': 'vertical',
         }}
       >
         {data}
       </Typography>
-    )
-  }
-  return (
-    <div>
-      <Collapse orientation="vertical" in={showData} onClick={() => setShowData(true)} collapsedSize="3em">
-        <Typography
-          variant="mono"
-          sx={{
-            fontWeight,
-            overflowWrap: 'anywhere',
-          }}
-        >
-          {data}
-        </Typography>
-      </Collapse>
-      {data.length > threshold && (
-        <Link sx={{ cursor: 'pointer' }} onClick={() => setShowData(!showData)}>
-          {showData ? t('common.hide') : t('common.show')}
-        </Link>
+      {(isOverflowing || isExpanded) && (
+        <StyledButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? t('common.hide') : t('common.show')}
+        </StyledButton>
       )}
     </div>
   )

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -168,7 +168,6 @@ export const RuntimeEventDetails: FC<{
             <br />
             <LongDataDisplay
               data={`0x${Buffer.from(event.body.data, 'base64').toString('hex')}`}
-              threshold={300}
               fontWeight={400}
             />
           </div>

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -359,7 +359,7 @@ export const RuntimeTransactionDetailView: FC<{
             <>
               <dt>{t('transaction.rawData')}</dt>
               <dd>
-                <LongDataDisplay data={base64ToHex(transaction.body.data)} threshold={300} />
+                <LongDataDisplay data={base64ToHex(transaction.body.data)} />
               </dd>
             </>
           )}
@@ -392,7 +392,7 @@ export const RuntimeTransactionDetailView: FC<{
                 <>
                   <dt>{t('transactions.encryption.encryptedData')}</dt>
                   <dd>
-                    <LongDataDisplay data={transaction.encryption_envelope.data} threshold={300} />
+                    <LongDataDisplay data={transaction.encryption_envelope.data} />
                   </dd>
                 </>
               )}
@@ -412,11 +412,7 @@ export const RuntimeTransactionDetailView: FC<{
                 <>
                   <dt>{t('transactions.encryption.encryptedResult')}</dt>
                   <dd>
-                    <LongDataDisplay
-                      data={transaction.encryption_envelope.result}
-                      fontWeight={400}
-                      threshold={300}
-                    />
+                    <LongDataDisplay data={transaction.encryption_envelope.result} fontWeight={400} />
                   </dd>
                 </>
               )}