fix padding, switch executed and inner call data and fix scroll overlay

ui/home/indicators/ChainIndicators.pw.tsx

@@ -17,9 +17,10 @@ test.beforeEach(async({ mockEnvs }) => {
 test.describe('daily txs chart', () => {
   let component: Locator;
 
-  test.beforeEach(async({ page, mockApiResponse, render }) => {
+  test.beforeEach(async({ page, mockApiResponse, mockAssetResponse, render }) => {
     await mockApiResponse('stats', statsMock.withSecondaryCoin);
     await mockApiResponse('stats_charts_txs', dailyTxsMock.base);
+    await mockAssetResponse(statsMock.withSecondaryCoin.coin_image as string, './playwright/mocks/image_svg.svg');
     component = await render(<ChainIndicators/>);
     await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
   });

ui/shared/ContainerWithScrollY.tsx

@@ -22,8 +22,7 @@ const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVis
     onScrollVisibilityChange?.(hasScroll);
   }, [ gradientHeight, onScrollVisibilityChange ]);
 
-  const gradientStartColor = useColorModeValue('whiteAlpha.600', 'blackAlpha.600');
-  const gradientEndColor = useColorModeValue('whiteAlpha.900', 'blackAlpha.900');
+  const gradientEndColor = useColorModeValue('white', 'black');
 
   return (
     <Flex
@@ -38,7 +37,7 @@ const ContainerWithScrollY = ({ className, gradientHeight, children, onScrollVis
         left: 0,
         right: '20px',
         height: `${ gradientHeight }px`,
-        bgGradient: `linear(to-b, ${ gradientStartColor } 37.5%, ${ gradientEndColor } 77.5%)`,
+        bgGradient: `linear(to-b, transparent, ${ gradientEndColor })`,
       } : undefined }
       pr={ hasScroll ? 5 : 0 }
       pb={ hasScroll ? `${ gradientHeight }px` : 0 }

ui/snippets/header/HeaderAlert.tsx

@@ -6,7 +6,7 @@ import MaintenanceAlert from './alerts/MaintenanceAlert';
 
 const HeaderAlert = () => {
   return (
-    <Flex flexDir="column" rowGap={ 3 } mb={ 6 } _empty={{ display: 'none' }}>
+    <Flex flexDir="column" rowGap={ 3 } mb={ 3 } _empty={{ display: 'none' }}>
       <MaintenanceAlert/>
       <IndexingBlocksAlert/>
     </Flex>

ui/tx/details/TxInfo.pw.tsx

@@ -65,6 +65,8 @@ test('pending', async({ render, page }) => {
   });
 });
 
+// NOTE: On the screenshot from the test for the mobile device, the scroll overlay is not quite right.
+// I checked it manually in the real device, there was not any issue with it
 test('with actions uniswap +@mobile +@dark-mode', async({ render, page }) => {
   const component = await render(<TxInfo data={ txMock.withActionsUniswap } isLoading={ false }/>);
 

ui/userOp/UserOpCallData.tsx

@@ -13,21 +13,21 @@ interface Props {
 
 const UserOpDecodedCallData = ({ data }: Props) => {
 
-  const [ callData, setCallData ] = React.useState(data.call_data || data.execute_call_data);
+  const [ callData, setCallData ] = React.useState<string | null>(data.execute_call_data || data.call_data);
 
   const handleSwitchChange = React.useCallback((isChecked: boolean) => {
-    setCallData(isChecked ? data.execute_call_data : data.call_data);
+    setCallData(isChecked ? data.call_data : data.execute_call_data);
   }, [ data ]);
 
   if (!callData) {
     return null;
   }
 
-  const toggler = data.execute_call_data ? (
+  const toggler = data.call_data ? (
     <UserOpCallDataSwitch
       onChange={ handleSwitchChange }
-      initialValue={ !data.call_data }
-      isDisabled={ !data.call_data }
+      initialValue={ !data.execute_call_data }
+      isDisabled={ !data.execute_call_data }
       ml={{ base: 3, lg: 'auto' }}
     />
   ) : null;

ui/userOp/UserOpDecodedCallData.tsx

@@ -13,21 +13,21 @@ interface Props {
 
 const UserOpDecodedCallData = ({ data }: Props) => {
 
-  const [ callData, setCallData ] = React.useState(data.decoded_call_data || data.decoded_execute_call_data);
+  const [ callData, setCallData ] = React.useState(data.decoded_execute_call_data || data.decoded_call_data);
 
   const handleSwitchChange = React.useCallback((isChecked: boolean) => {
-    setCallData(isChecked ? data.decoded_execute_call_data : data.decoded_call_data);
+    setCallData(isChecked ? data.decoded_call_data : data.decoded_execute_call_data);
   }, [ data ]);
 
   if (!callData) {
     return null;
   }
 
-  const toggler = data.decoded_execute_call_data ? (
+  const toggler = data.decoded_call_data ? (
     <UserOpCallDataSwitch
       onChange={ handleSwitchChange }
-      initialValue={ !data.decoded_call_data }
-      isDisabled={ !data.decoded_call_data }
+      initialValue={ !data.decoded_execute_call_data }
+      isDisabled={ !data.decoded_execute_call_data }
       ml={{ base: 0, lg: 'auto' }}
     />
   ) : null;