fix: Display MethodDetails content on smaller screens (5afe#3309)

* fix: Make tx data horizontally scrollable * build: Automatically line break tx data if there is not enough space * refactor: Use ValueWrapper in parent component * refactor: Move ValueWrapper to parent component * fix: Remove white-space nowrap from MethodDetails labels
curedao · Jan 18, 2022 · ecb6ed5 · ecb6ed5
1 parent 6b83e9e
commit ecb6ed5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx b/src/routes/safe/components/Transactions/TxList/MethodDetails.tsx
@@ -10,6 +10,7 @@ const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
   padding-left: 24px;
   display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')};
   align-items: center;
+  flex-wrap: wrap;
 
   p:first-of-type {
     margin-right: ${({ isArrayParameter }) => (isArrayParameter ? '0' : '4px')};
@@ -18,10 +19,12 @@ const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
 
 const TxInfo = styled.div`
   padding: 8px 0;
+  overflow-x: auto;
 `
 
-const StyledMethodName = styled(Text)`
-  white-space: nowrap;
+const ValueWrapper = styled.div`
+  min-width: 50%;
+  flex-shrink: 0;
 `
 
 export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactElement => {
@@ -33,10 +36,12 @@ export const MethodDetails = ({ data }: { data: DataDecoded }): React.ReactEleme
 
       {data.parameters?.map((param, index) => (
         <TxDetailsMethodParam key={`${data.method}_param-${index}`} isArrayParameter={isArrayParameter(param.type)}>
-          <StyledMethodName size="xl" strong>
+          <Text size="xl" strong>
             {param.name}({param.type}):
-          </StyledMethodName>
-          <Value method={data.method} type={param.type} value={param.value as string} />
+          </Text>
+          <ValueWrapper>
+            <Value method={data.method} type={param.type} value={param.value as string} />
+          </ValueWrapper>
         </TxDetailsMethodParam>
       ))}
     </TxInfo>

diff --git a/src/routes/safe/components/Transactions/TxList/MethodValue.tsx b/src/routes/safe/components/Transactions/TxList/MethodValue.tsx
@@ -23,7 +23,7 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
   const getTextValue = (value: string) => <HexEncodedData limit={60} hexData={value} />
 
   const getArrayValue = (parentId: string, value: string[] | string) => (
-    <div>
+    <>
       [
       <NestedWrapper>
         {(value as string[]).map((currentValue, index) => {
@@ -38,7 +38,7 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
         })}
       </NestedWrapper>
       ]
-    </div>
+    </>
   )
 
   if (isArrayParameter(type) || Array.isArray(value)) {
@@ -51,7 +51,7 @@ const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactEle
 const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
   if (isArrayParameter(type) && isAddress(type)) {
     return (
-      <div>
+      <>
         [
         <NestedWrapper>
           {(props.value as string[]).map((address) => {
@@ -62,7 +62,7 @@ const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
           })}
         </NestedWrapper>
         ]
-      </div>
+      </>
     )
   }