From 050f6bc4ffee1ed7572862926f830b41a7b81254 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Fri, 13 Sep 2024 12:46:06 +0200
Subject: [PATCH] Long `Call` field value in `Decoded input data` breaks
 adaptive UI on mobile

Fixes #2216
---
 ui/shared/logs/LogDecodedInputDataHeader.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/shared/logs/LogDecodedInputDataHeader.tsx b/ui/shared/logs/LogDecodedInputDataHeader.tsx
index e8fad3846f..aaa4528e2f 100644
--- 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>
   );