feat: use browser store for setting dimensions

src/components/browser/BrowserContent.tsx

@@ -11,17 +11,12 @@ import {
 
 // TODO: Tab !show currentUrl after recordingUrl global state
 export const BrowserContent = () => {
-  const { width } = useBrowserDimensionsStore();
   const { socket } = useSocketStore();
 
   const [tabs, setTabs] = useState<string[]>(["current"]);
   const [tabIndex, setTabIndex] = React.useState(0);
   const [showOutputData, setShowOutputData] = useState(false);
-  const [browserWidth, setBrowserWidth] = useState(window.innerWidth * 0.7);
+  const { browserWidth } = useBrowserDimensionsStore();
-
-  const handleResize = useCallback(() => {
-    setBrowserWidth(window.innerWidth * 0.7);
-  }, []);
 
   const handleChangeIndex = useCallback(
     (index: number) => {
@@ -114,14 +109,6 @@ export const BrowserContent = () => {
     [handleCloseTab]
   );
 
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [handleResize]);
-
   useEffect(() => {
     if (socket) {
       socket.on("newTab", handleNewTab);

src/components/browser/BrowserWindow.tsx

@@ -10,6 +10,7 @@ import { useGlobalInfoStore } from '../../context/globalInfo';
 import { useTranslation } from 'react-i18next';
 import { AuthContext } from '../../context/auth';
 import { coordinateMapper } from '../../helpers/coordinateMapper';
+import { useBrowserDimensionsStore } from '../../context/browserDimensions';
 
 interface ElementInfo {
     tagName: string;
@@ -69,6 +70,7 @@ const getAttributeOptions = (tagName: string, elementInfo: ElementInfo | null):
 
 export const BrowserWindow = () => {
     const { t } = useTranslation();
+    const { browserWidth, browserHeight } = useBrowserDimensionsStore();
     const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
     const [screenShot, setScreenShot] = useState<string>("");
     const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string, elementInfo: ElementInfo | null, childSelectors?: string[] } | null>(null);
@@ -76,7 +78,7 @@ export const BrowserWindow = () => {
     const [attributeOptions, setAttributeOptions] = useState<AttributeOption[]>([]);
     const [selectedElement, setSelectedElement] = useState<{ selector: string, info: ElementInfo | null } | null>(null);
     const [currentListId, setCurrentListId] = useState<number | null>(null);
-    const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: window.innerWidth * 0.7, height: window.innerHeight * 0.64 });
+    const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: browserWidth, height: browserHeight });
 
     const [listSelector, setListSelector] = useState<string | null>(null);
     const [fields, setFields] = useState<Record<string, TextStep>>({});
@@ -90,29 +92,14 @@ export const BrowserWindow = () => {
     const { state } = useContext(AuthContext);
     const { user } = state;
 
-    const [dimensions, setDimensions] = useState({
+    const dimensions = {
-        width: window.innerWidth * 0.7,
+        width: browserWidth,
-        height: window.innerHeight * 0.64
+        height: browserHeight
-    });
+    };
-    
-    const handleResize = useCallback(() => {
-        setDimensions({
-            width: window.innerWidth * 0.7,
-            height: window.innerHeight * 0.64
-        });
-    }, []);
-    
-    useEffect(() => {
-        window.addEventListener('resize', handleResize);
-        
-        return () => {
-          window.removeEventListener('resize', handleResize);
-        };
-    }, [handleResize]);
 
     useEffect(() => {
         coordinateMapper.updateDimensions(dimensions.width, dimensions.height, viewportInfo.width, viewportInfo.height);
-    }, [viewportInfo]);
+    }, [viewportInfo, dimensions.width, dimensions.height]);
 
     useEffect(() => {
         if (listSelector) {
@@ -482,7 +469,7 @@ export const BrowserWindow = () => {
     }, [paginationMode, resetPaginationSelector]);
 
     return (
-        <div onClick={handleClick} style={{ width: window.innerWidth * 0.7 }} id="browser-window">
+        <div onClick={handleClick} style={{ width: browserWidth }} id="browser-window">
             {
                 getText === true || getList === true ? (
                     <GenericModal

src/components/recorder/RightSidePanel.tsx

@@ -20,6 +20,7 @@ import { getActiveWorkflow } from "../../api/workflow";
 import ActionDescriptionBox from '../action/ActionDescriptionBox';
 import { useThemeMode } from '../../context/theme-provider';
 import { useTranslation } from 'react-i18next';
+import { useBrowserDimensionsStore } from '../../context/browserDimensions';
 
 const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => {
   getActiveWorkflow(id).then(
@@ -54,9 +55,7 @@ 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({
+  const { panelHeight } = useBrowserDimensionsStore();
-    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();
@@ -69,21 +68,6 @@ 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);
@@ -480,7 +464,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const isDarkMode = theme.darkMode;
 
   return (
-    <Paper sx={{ height: panelDimensions.height, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
+    <Paper sx={{ height: panelHeight, 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> */}

src/components/run/InterpretationLog.tsx

@@ -34,22 +34,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
   const logEndRef = useRef<HTMLDivElement | null>(null);
 
-  const { width } = useBrowserDimensionsStore();
+  const { browserWidth, outputPreviewHeight, outputPreviewWidth } = useBrowserDimensionsStore();
   const { socket } = useSocketStore();
   const { currentWorkflowActionsState, shouldResetInterpretationLog, notify } = useGlobalInfoStore();
-  const [dimensions, setDimensions] = useState({
-    drawerHeight: window.innerHeight * 0.7,
-    drawerWidth: window.innerWidth * 0.716,
-    buttonWidth: window.innerWidth * 0.7
-  });
-
-  const handleResize = useCallback(() => {
-    setDimensions({
-      drawerHeight: window.innerHeight * 0.7,
-      drawerWidth: window.innerWidth * 0.716,
-      buttonWidth: window.innerWidth * 0.7
-    });
-  }, []);
 
   const toggleDrawer = (newOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
     if (
@@ -108,14 +95,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     setCustomValue(event.target.value);
   };
 
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [handleResize]);
-
   useEffect(() => {
     if (shouldResetInterpretationLog) {
       setLog('');
@@ -163,7 +142,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
             background: '#ff00c3',
             border: 'none',
             padding: '10px 20px',
-            width: dimensions.buttonWidth,
+            width: browserWidth,
             overflow: 'hidden',
             textAlign: 'left',
             justifyContent: 'flex-start',
@@ -185,8 +164,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
               background: `${darkMode ? '#1e2124' : 'white'}`,
               color: `${darkMode ? 'white' : 'black'}`,
               padding: '10px',
-              height: dimensions.drawerHeight,
+              height: outputPreviewHeight,
-              width: dimensions.drawerWidth,
+              width: outputPreviewWidth,
               display: 'flex',
               borderRadius: '10px 10px 0 0',
             },

src/helpers/coordinateMapper.ts

@@ -1,4 +1,6 @@
+// coordinateMapper.ts
 import { BROWSER_DEFAULT_HEIGHT, BROWSER_DEFAULT_WIDTH } from "../constants/const";
+import { getResponsiveDimensions } from "./dimensionUtils";
 
 export class CoordinateMapper {
   private canvasWidth: number;
@@ -6,16 +8,13 @@ export class CoordinateMapper {
   private browserWidth: number;
   private browserHeight: number;
   
-  constructor(
+  constructor() {
-    canvasWidth: number = window.innerWidth * 0.7, 
+    // Use responsive dimensions instead of hardcoded values
-    canvasHeight: number = window.innerHeight * 0.64,
+    const dimensions = getResponsiveDimensions();
-    browserWidth: number = BROWSER_DEFAULT_WIDTH,
+    this.canvasWidth = dimensions.canvasWidth;
-    browserHeight: number = BROWSER_DEFAULT_HEIGHT
+    this.canvasHeight = dimensions.canvasHeight;
-  ) {
+    this.browserWidth = BROWSER_DEFAULT_WIDTH;
-    this.canvasWidth = canvasWidth;
+    this.browserHeight = BROWSER_DEFAULT_HEIGHT;
-    this.canvasHeight = canvasHeight;
-    this.browserWidth = browserWidth;
-    this.browserHeight = browserHeight;
   }
   
   mapCanvasToBrowser(coord: { x: number, y: number }): { x: number, y: number } {