diff --git a/features/overview/shared/overview-item/overview-item-value.tsx b/features/overview/shared/overview-item/overview-item-value.tsx index 0bdf18dd..3ad5d260 100644 --- a/features/overview/shared/overview-item/overview-item-value.tsx +++ b/features/overview/shared/overview-item/overview-item-value.tsx @@ -3,6 +3,7 @@ import { type FC, useMemo } from 'react'; import { InlineLoader } from 'shared/components'; import { FormatToken } from 'shared/formatters'; import { isBigint } from 'utils'; +import { WEI_PER_ETHER } from 'consts/tx'; import { ContentText } from './styles'; @@ -14,6 +15,10 @@ export interface ItemValueProps { textSize?: 'lg' | 'xl'; } +const countMaxDecimalDigits = (amount: bigint) => { + return amount / WEI_PER_ETHER > 1000 ? 1 : 4; +}; + export const OverviewItemValue: FC = (props) => { const { content, isLoading, color, textSize = 'xl', symbol = '' } = props; const contentView = useMemo( @@ -21,7 +26,7 @@ export const OverviewItemValue: FC = (props) => { isBigint(content) ? ( diff --git a/shared/components/layout/styles.tsx b/shared/components/layout/styles.tsx index efbf04e7..99467c8b 100644 --- a/shared/components/layout/styles.tsx +++ b/shared/components/layout/styles.tsx @@ -56,7 +56,7 @@ export const LayoutStyles = styled(Container)<{ isError: boolean }>` min-height: 100vh; height: auto; - @media ${devicesHeaderMedia.tablet} { + @media ${devicesHeaderMedia.laptop} { grid-template-columns: 200px 1fr; grid-template-areas: ${({ isError }) => tabletTemplateAreas[isError ? 'withError' : 'default']}; diff --git a/styles/constants.ts b/styles/constants.ts index 9bb31abd..c6e115f6 100644 --- a/styles/constants.ts +++ b/styles/constants.ts @@ -1,3 +1,4 @@ export const NAV_MOBILE_HEIGHT = 60; export const NAV_MOBILE_MAX_WIDTH = 880; export const NAV_TABLET_MAX_WIDTH = 1024; +export const NAV_LAPTOP_MAX_WIDTH = 1200; diff --git a/styles/global.ts b/styles/global.ts index 10811e98..9798ed16 100644 --- a/styles/global.ts +++ b/styles/global.ts @@ -2,12 +2,14 @@ import { createGlobalStyle } from 'styled-components'; import { ThemeName } from '@lidofinance/lido-ui'; import { + NAV_LAPTOP_MAX_WIDTH, NAV_MOBILE_HEIGHT, NAV_MOBILE_MAX_WIDTH, NAV_TABLET_MAX_WIDTH, } from './constants'; export const devicesHeaderMedia = { + laptop: `screen and (max-width: ${NAV_LAPTOP_MAX_WIDTH}px)`, tablet: `screen and (max-width: ${NAV_TABLET_MAX_WIDTH}px)`, mobile: `screen and (max-width: ${NAV_MOBILE_MAX_WIDTH}px)`, };