fix: css for Metamask warning banner (#5365)

apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/MetamaskTransactionWarning/index.tsx

@@ -1,7 +1,7 @@
 import { CHAIN_INFO } from '@cowprotocol/common-const'
 import { getIsNativeToken } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
-import { BannerOrientation, InlineBanner } from '@cowprotocol/ui'
+import { InlineBanner } from '@cowprotocol/ui'
 import { useWalletProvider } from '@cowprotocol/wallet-provider'
 import { Currency } from '@uniswap/sdk-core'
 
@@ -11,6 +11,7 @@ import styled from 'styled-components/macro'
 const Banner = styled(InlineBanner)`
   font-size: 14px;
   text-align: center;
+  width: 100%;
 `
 
 const NetworkInfo = styled.div`
@@ -30,11 +31,11 @@ export function MetamaskTransactionWarning({ sellToken }: { sellToken: Currency
   const chainInfo = CHAIN_INFO[sellToken.chainId as SupportedChainId]
 
   return (
-    <Banner bannerType="danger" orientation={BannerOrientation.Vertical} iconSize={32}>
-      Issues have been reported with Metamask sending transactions to the wrong chain. 
-      Before you sign, please check in your wallet that the transaction is being sent to the network:{' '}
+    <Banner bannerType="danger" iconSize={32}>
+      Issues have been reported with Metamask sending transactions to the wrong chain. Before you sign, please check in
+      your wallet that the transaction is being sent to the network:{' '}
       <NetworkInfo>
-        <SVG src={chainInfo.logo.light} height={24} /> <span>{chainInfo.label}</span>
+        <SVG src={chainInfo.logo.light} height={24} width={24} /> <span>{chainInfo.label}</span>
       </NetworkInfo>
     </Banner>
   )