Tweak rendering of json data

oasisprotocol · Nov 28, 2023 · 6c4327d · 6c4327d
1 parent e68542f
commit 6c4327d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/app/components/CodeDisplay/index.tsx b/src/app/components/CodeDisplay/index.tsx
@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
 import { ScrollableDataDisplay } from '../../components/ScrollableDataDisplay'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { useScreenSize } from '../../hooks/useScreensize'
@@ -63,6 +64,10 @@ export const RawDataDisplay: FC<RawDataDisplayProps> = ({ data, label, extraTopP
   )
 }
 
+const StyledPre = styled('pre')({
+  margin: 0,
+})
+
 type JsonCodeDisplayProps = {
   data: Record<string, any>
   label: string
@@ -71,5 +76,11 @@ type JsonCodeDisplayProps = {
 export const JsonCodeDisplay: FC<JsonCodeDisplayProps> = ({ data, label }) => {
   const formattedJson = JSON.stringify(data, null, 2)
 
-  return <CodeDisplay code={<pre>{formattedJson}</pre>} copyToClipboardValue={formattedJson} label={label} />
+  return (
+    <CodeDisplay
+      code={<StyledPre>{formattedJson}</StyledPre>}
+      copyToClipboardValue={formattedJson}
+      label={label}
+    />
+  )
 }
diff --git a/src/app/components/ScrollableDataDisplay/index.tsx b/src/app/components/ScrollableDataDisplay/index.tsx
@@ -25,7 +25,7 @@ export const ScrollableDataDisplay: FC<{ data: ReactNode; fontWeight?: number }>
           height: '349px',
           overflowY: 'scroll',
           p: 4,
-          maxWidth: '100%',
+          width: '100%',
         }}
       >
         <Typography