diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx index 2509775d..6e8218f4 100644 --- a/frontend/src/basic/BookPage/index.tsx +++ b/frontend/src/basic/BookPage/index.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Button, Grid, ButtonGroup } from '@mui/material'; +import { Button, Grid, ButtonGroup, useTheme } from '@mui/material'; import { useNavigate } from 'react-router-dom'; import DepthChart from '../../components/Charts/DepthChart'; import BookTable from '../../components/BookTable'; @@ -17,16 +17,18 @@ import { type PublicOrder } from '../../models'; const BookPage = (): React.JSX.Element => { const { windowSize } = useContext(AppContext); const { federation } = useContext(FederationContext); + const theme = useTheme(); const { t } = useTranslation(); const navigate = useNavigate(); const [view, setView] = useState<'list' | 'depth' | 'map'>('list'); const [openVisitThirdParty, setOpenVisitThirdParty] = useState(false); const [thirdPartyOrder, setThirdPartyOrder] = useState(); - const doubleView = windowSize.width > 115; - const width = windowSize.width * 0.9; - const maxBookTableWidth = 85; - const chartWidthEm = width - maxBookTableWidth; + const doubleView = windowSize.width > 100; + const width = windowSize.width * 0.85; + const maxBookTableWidth = width * 0.7; + const chartWidthEm = width * 0.25; + const fontSize = theme.typography.fontSize; const onOrderClicked = function (id: number, shortAlias: string): void { const thirdParty = thirdParties[shortAlias]; @@ -51,6 +53,8 @@ const BookPage = (): React.JSX.Element => { ) : ( <>