feat: ensure right panel does not stack over browser
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user