Merge pull request #874 from getmaxun/recorder-ui-shift

fix: unwanted overflow in recorder

src/components/browser/BrowserRecordingSave.tsx

@@ -143,7 +143,8 @@ const BrowserRecordingSave = () => {
           overflow: 'hidden',
           display: 'flex',
           justifyContent: 'space-between',
-          height: "48px"
+          height: "48px",
+          marginLeft: '10px'
         }}>
           <Button
             onClick={() => setOpenDiscardModal(true)}

src/components/recorder/RightSidePanel.tsx

@@ -534,7 +534,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const isDarkMode = theme.darkMode;
 
   return (
-    <Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
+    <Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit', position: "relative", border: "none" }} id="browser-actions" elevation={0}>
       <ActionDescriptionBox isDarkMode={isDarkMode} />
       <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
         {!isAnyActionActive && (

src/helpers/dimensionUtils.ts

@@ -73,7 +73,7 @@ export const getResponsiveDimensions = (): AppDimensions => {
     browserWidth,
     browserHeight,
     panelHeight: browserHeight + 137,   
-    outputPreviewHeight: windowHeight * 0.7,
+    outputPreviewHeight: windowHeight * 0.9,
     outputPreviewWidth,
     canvasWidth: browserWidth,
     canvasHeight: browserHeight

src/pages/PageWrapper.tsx

@@ -68,7 +68,7 @@ export const PageWrapper = () => {
       navigate('/recording');
     }
     else if (location.pathname === '/recording' ||
-           (getTabState('nextTabIsRecording') === 'true' && sessionParam === storedSessionId)) {
+      (getTabState('nextTabIsRecording') === 'true' && sessionParam === storedSessionId)) {
       setIsRecordingMode(true);
 
       if (location.pathname !== '/recording') {
@@ -106,8 +106,8 @@ export const PageWrapper = () => {
               </Box>
             )}
             <Box sx={{
-              display: isAuthPage || isRecordingPage ? 'block' : 'flex', 
-              minHeight: isAuthPage || isRecordingPage ? '100vh' : 'calc(100vh - 64px)'
+              display: isAuthPage ? 'block' : 'flex',
+              minHeight: isAuthPage ? '100vh' : 'calc(100vh - 64px)'
             }}>
               <Routes>
                 <Route element={<UserRoute />}>