fix: width of widget and network balances on token details (#4392)

* fix width

* nits

* width var

* nit

* px fix
Co-authored-by: Vignesh Mohankumar <me@vig.xyz>

src/components/Tokens/TokenDetails/BalanceSummary.tsx

@@ -9,15 +9,14 @@ import styled, { useTheme } from 'styled-components/macro'
 import NetworkBalance from './NetworkBalance'
 
 const BalancesCard = styled.div`
-  width: 284px;
+  width: 100%;
   height: fit-content;
   color: ${({ theme }) => theme.textPrimary};
   font-size: 12px;
-  line-height: 20px;
+  line-height: 16px;
   padding: 20px;
   background-color: ${({ theme }) => theme.backgroundSurface};
-  border-radius: 12px;
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  border-radius: 16px;
 `
 const ErrorState = styled.div`
   display: flex;

src/pages/TokenDetails/index.tsx

@@ -26,6 +26,7 @@ import styled from 'styled-components/macro'
 import { DARK_THEME, LIGHT_THEME } from 'theme/token-details-widget-theme'
 import { ROUTER_URL, RPC_URL_MAP } from 'utils/token-details-widget-config'
 
+const WIDGET_WIDTH = 320
 const Footer = styled.div`
   display: none;
   @media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
@@ -53,6 +54,7 @@ const RightPanel = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;
+  width: ${WIDGET_WIDTH}px;
 
   @media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
     display: none;
@@ -149,7 +151,7 @@ export default function TokenDetails() {
               routerUrl={ROUTER_URL}
               theme={widgetTheme}
               // tokenList={[]}
-              width={290}
+              width={WIDGET_WIDTH}
             />
             {tokenWarning && <TokenSafetyMessage tokenAddress={tokenAddress} warning={tokenWarning} />}
             {!loading && (