diff --git a/src/components/recorder/RightSidePanel.tsx b/src/components/recorder/RightSidePanel.tsx
index 12854827..0c2c54b3 100644
--- a/src/components/recorder/RightSidePanel.tsx
+++ b/src/components/recorder/RightSidePanel.tsx
@@ -54,6 +54,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
   const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false);
   const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
+  const [panelDimensions, setPanelDimensions] = useState({
+    height: window.innerHeight * 0.64 + 137
+  });
 
   const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
   const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage, showPaginationOptions, setShowPaginationOptions, showLimitOptions, setShowLimitOptions, workflow, setWorkflow } = useActionContext();
@@ -66,6 +69,21 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
     //setRecordingLength(data.workflow.length);
   }, [])
 
+  const handleResize = useCallback(() => {
+    // Update panel dimensions
+    setPanelDimensions({
+      height: window.innerHeight * 0.64 + 137
+    });
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
   useEffect(() => {
     if (socket) {
       socket.on("workflow", workflowHandler);
@@ -461,10 +479,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const theme = useThemeMode();
   const isDarkMode = theme.darkMode;
 
-  let panelHeight = `${(window.innerHeight * 0.64) + 137}px`
-
   return (
-    <Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
+    <Paper sx={{ height: panelDimensions.height, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
       {/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
         <Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
       </SimpleBox> */}