fix: Adjust component heights to prevent nav bar overlap

This commit is contained in:
sahil-tgs 2024-07-17 02:24:34 +05:30 committed by Reckless_Satoshi
parent 6fc5f906dc
commit 13a681b9b3
2 changed files with 10 additions and 11 deletions

View File

@ -3,17 +3,16 @@ import { useTranslation } from 'react-i18next';
import { Button, Grid, ButtonGroup, Dialog, Box } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import DepthChart from '../../components/Charts/DepthChart';
import { NoRobotDialog } from '../../components/Dialogs';
import MakerForm from '../../components/MakerForm';
import BookTable from '../../components/BookTable';
// Icons
import { BarChart, FormatListBulleted, Map } from '@mui/icons-material';
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
import { AppContext, UseAppStoreType } from '../../contexts/AppContext';
import MapChart from '../../components/Charts/MapChart';
import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
import { FederationContext, UseFederationStoreType } from '../../contexts/FederationContext';
import { GarageContext, UseGarageStoreType } from '../../contexts/GarageContext';
const BookPage = (): JSX.Element => {
const { windowSize } = useContext<UseAppStoreType>(AppContext);
@ -126,7 +125,7 @@ const BookPage = (): JSX.Element => {
<Grid item>
<BookTable
maxWidth={maxBookTableWidth} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
maxHeight={windowSize.height * 0.65} // Adjusted height to reduce rows
fullWidth={windowSize.width} // EM units
fullHeight={windowSize.height} // EM units
defaultFullscreen={false}
@ -137,14 +136,14 @@ const BookPage = (): JSX.Element => {
<Grid item>
<DepthChart
maxWidth={chartWidthEm} // EM units
maxHeight={(windowSize.height * 0.825 - 5) / 2} // EM units
maxHeight={(windowSize.height * 0.65) / 2} // Adjusted height
onOrderClicked={onOrderClicked}
/>
</Grid>
<Grid item>
<MapChart
maxWidth={chartWidthEm} // EM units
maxHeight={(windowSize.height * 0.825 - 5) / 2} // EM units
maxHeight={(windowSize.height * 0.65) / 2} // Adjusted height
onOrderClicked={onOrderClicked}
/>
</Grid>
@ -153,19 +152,19 @@ const BookPage = (): JSX.Element => {
) : view === 'depth' ? (
<DepthChart
maxWidth={windowSize.width * 0.8} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
maxHeight={windowSize.height * 0.65} // Adjusted height
onOrderClicked={onOrderClicked}
/>
) : view === 'map' ? (
<MapChart
maxWidth={windowSize.width * 0.8} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
maxHeight={windowSize.height * 0.6} // Adjusted height
onOrderClicked={onOrderClicked}
/>
) : (
<BookTable
maxWidth={windowSize.width * 0.97} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
maxHeight={windowSize.height * 0.624} // Adjusted height to reduce rows
fullWidth={windowSize.width} // EM units
fullHeight={windowSize.height} // EM units
defaultFullscreen={false}

View File

@ -9,7 +9,7 @@ import { FederationContext, UseFederationStoreType } from '../../contexts/Federa
const SettingsPage = (): JSX.Element => {
const { windowSize, navbarHeight } = useContext<UseAppStoreType>(AppContext);
const { federation, addNewCoordinator } = useContext<UseFederationStoreType>(FederationContext);
const maxHeight = (windowSize.height - navbarHeight) * 0.85 - 3;
const maxHeight = (windowSize.height * 0.65)
const [newAlias, setNewAlias] = useState<string>('');
const [newUrl, setNewUrl] = useState<string>('');
const [error, setError] = useState<string>();