Long Call field value in Decoded input data breaks adaptive UI on…

… mobile (#2239) Fixes #2216
blockscout · Sep 13, 2024 · 6da61c8 · 6da61c8
1 parent d1632da
commit 6da61c8
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/ui/shared/logs/LogDecodedInputDataHeader.tsx b/ui/shared/logs/LogDecodedInputDataHeader.tsx
@@ -13,6 +13,7 @@ interface Props {
 const Item = ({ label, children, isLoading }: { label: string; children: React.ReactNode; isLoading?: boolean}) => {
   return (
     <Flex
+      w="100%"
       columnGap={ 5 }
       rowGap={ 2 }
       px={{ base: 0, lg: 4 }}
@@ -35,6 +36,7 @@ const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading, rightSlot
       fontSize="sm"
       lineHeight={ 5 }
       flexGrow={ 1 }
+      w="100%"
     >
       <Flex columnGap={ 2 } w="100%">
         <Item label="Method id" isLoading={ isLoading }>
@@ -43,7 +45,7 @@ const LogDecodedInputDataHeader = ({ methodId, methodCall, isLoading, rightSlot
         { rightSlot }
       </Flex>
       <Item label="Call" isLoading={ isLoading }>
-        <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">{ methodCall }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap" w="100%">{ methodCall }</Skeleton>
       </Item>
     </VStack>
   );