Fix: too wide label (safe-global#4282)

* fix: duplicated advanced data DecodedTx was rendering a decodedData block, which was also rendered by the Summary component. Right now I’m hiding the decodedData block in the summary based on a prop that is passed by the parent component. This will be refactored and tested over here: safe-global#4091 * Update src/components/tx/DecodedTx/index.tsx Co-authored-by: Usame Algan <[email protected]> * fix: too wide label * fix: update snapshot --------- Co-authored-by: Usame Algan <[email protected]>
SynthWave-Systems · Sep 30, 2024 · 6375e28 · 6375e28
1 parent 928c2d0
commit 6375e28
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap b/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap
@@ -6,11 +6,12 @@ exports[`HexEncodedData should not cut the text in case the limit option is high
     class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item css-658w1k-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
       data-testid="tx-row-title"
+      style="word-break: break-word;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-s5yue5-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
       >
         Data (hex-encoded)
       </p>
@@ -67,11 +68,12 @@ exports[`HexEncodedData should not highlight the data if highlight option is fal
     class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item css-658w1k-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
       data-testid="tx-row-title"
+      style="word-break: break-word;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-s5yue5-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
       >
         Some arbitrary data
       </p>
@@ -129,11 +131,12 @@ exports[`HexEncodedData should render the default component markup 1`] = `
     class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item css-658w1k-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-item css-1wehkfy-MuiGrid-root"
       data-testid="tx-row-title"
+      style="word-break: break-word;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-s5yue5-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-fzss1y-MuiTypography-root"
       >
         Data (hex-encoded)
       </p>

diff --git a/src/components/tx/FieldsGrid/index.tsx b/src/components/tx/FieldsGrid/index.tsx
@@ -1,16 +1,15 @@
 import { type ReactNode } from 'react'
 import { Grid, Typography } from '@mui/material'
 
+const width = { xl: '25%', lg: '200px', xs: 'auto' }
 const minWidth = { xl: '25%', lg: '200px' }
 const wrap = { flexWrap: { xl: 'nowrap' } }
 
 const FieldsGrid = ({ title, children }: { title: string | ReactNode; children: ReactNode }) => {
   return (
     <Grid container alignItems="center" gap={1} sx={wrap}>
-      <Grid item minWidth={minWidth} data-testid="tx-row-title">
-        <Typography color="primary.light" noWrap>
-          {title}
-        </Typography>
+      <Grid item data-testid="tx-row-title" width={width} minWidth={minWidth} style={{ wordBreak: 'break-word' }}>
+        <Typography color="primary.light">{title}</Typography>
       </Grid>
 
       <Grid item xs data-testid="tx-data-row">