feat: ensure right panel does not stack over browser

This commit is contained in:
karishmas6
2024-10-18 23:18:26 +05:30
parent cc37d9e698
commit c2fc94ab0b

View File

@@ -110,23 +110,26 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
} }
}, [socket, handleLoaded]); }, [socket, handleLoaded]);
return ( return (
<ActionProvider> <ActionProvider>
<BrowserStepsProvider> <BrowserStepsProvider>
<div> <div style={{ height: '100vh', display: 'flex' }}>
{isLoaded ? ( {isLoaded ? (
<Grid container direction="row" spacing={0} style={{ height: '100vh' }}> <>
<Grid item xs={6} sm={6} md={6} lg={10} xl={6}> <Grid container direction="row" style={{ flexGrow: 1, height: '100%' }}>
<div style={{ height: '100%' }}> <Grid item xs={12} md={10} lg={10} style={{ height: '100%', overflow: 'hidden' }}>
<BrowserContent /> <div style={{ height: '100%', overflow: 'auto' }}>
</div> <BrowserContent />
</div>
</Grid>
<Grid item xs={12} md={2} lg={2} style={{ height: '100%', overflowY: 'auto' }}>
<div className="right-side-panel" style={{ height: '100%' }}>
<RightSidePanel onFinishCapture={handleShowOutputData} />
</div>
</Grid>
</Grid> </Grid>
<Grid item xs={6} sm={6} md={6} lg={2} xl={6}> </>
<div className="right-side-panel">
<RightSidePanel onFinishCapture={handleShowOutputData} />
</div>
</Grid>
</Grid>
) : ( ) : (
<Loader /> <Loader />
)} )}
@@ -136,6 +139,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
); );
}; };
const RecordingPageWrapper = styled.div` const RecordingPageWrapper = styled.div`
position: relative; position: relative;
width: 100vw; width: 100vw;