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

fix: unwanted overflow in recorder

Author: amhsirak

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

@@ -55,7 +55,7 @@ export const PageWrapper = () => {
     const sessionParam = urlParams.get('session');
     const storedSessionId = getTabState('recordingSessionId');
     const storedRecordingUrl = getTabState('recordingUrl');
-    
+
     if (location.pathname === '/recording-setup' && sessionParam && sessionParam === storedSessionId) {
       setBrowserId('new-recording');
       setRecordingName('');
@@ -67,14 +67,14 @@ export const PageWrapper = () => {
 
       navigate('/recording');
     }
-    else if (location.pathname === '/recording' || 
-           (getTabState('nextTabIsRecording') === 'true' && sessionParam === storedSessionId)) {
+    else if (location.pathname === '/recording' ||
+      (getTabState('nextTabIsRecording') === 'true' && sessionParam === storedSessionId)) {
       setIsRecordingMode(true);
-      
+
       if (location.pathname !== '/recording') {
         navigate('/recording');
       }
-      
+
       window.sessionStorage.removeItem('nextTabIsRecording');
     } else if (tabMode === 'main') {
       console.log('Tab is in main application mode');
@@ -88,26 +88,26 @@ export const PageWrapper = () => {
 
   const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
   const isRecordingPage = location.pathname === '/recording';
-  
+
   return (
     <div>
       <AuthProvider>
         <SocketProvider>
           <React.Fragment>
             {/* Show NavBar only for main app pages, not for recording pages */}
             {!isRecordingPage && (
-              <Box sx={{ 
-                position: 'sticky', 
-                top: 0, 
+              <Box sx={{
+                position: 'sticky',
+                top: 0,
                 zIndex: 1100,
                 backgroundColor: 'background.paper'
               }}>
                 <NavBar recordingName={recordingName} isRecording={false} />
               </Box>
             )}
-            <Box sx={{ 
-              display: isAuthPage || isRecordingPage ? 'block' : 'flex', 
-              minHeight: isAuthPage || isRecordingPage ? '100vh' : 'calc(100vh - 64px)'
+            <Box sx={{
+              display: isAuthPage ? 'block' : 'flex',
+              minHeight: isAuthPage ? '100vh' : 'calc(100vh - 64px)'
             }}>
               <Routes>
                 <Route element={<UserRoute />}>