feat: browser & right panel ui

src/components/organisms/BrowserContent.tsx

@@ -6,6 +6,7 @@ import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { BrowserTabs } from "../molecules/BrowserTabs";
 import { useSocketStore } from "../../context/socket";
 import { getCurrentTabs, getCurrentUrl, interpretCurrentRecording } from "../../api/recording";
+import { Box } from '@mui/material';
 
 // TODO: Tab !show currentUrl after recordingUrl global state
 export const BrowserContent = () => {
@@ -114,7 +115,7 @@ export const BrowserContent = () => {
   }, [])
 
   return (
-    <BrowserContentWrapper>
+    <>
       <BrowserTabs
         tabs={tabs}
         handleTabChange={handleTabChange}
@@ -125,14 +126,13 @@ export const BrowserContent = () => {
       />
       <BrowserNavBar
         // todo: use width from browser dimension once fixed
-        browserWidth={1270}
+        browserWidth={900}
         handleUrlChanged={handleUrlChanged}
       />
       <BrowserWindow/>
-    </BrowserContentWrapper>
+    </>
   );
 }
 
 const BrowserContentWrapper = styled.div`
-  grid-area: browser;
 `;

src/components/organisms/BrowserWindow.tsx

@@ -360,15 +360,15 @@ export const BrowserWindow = () => {
                 <Highlighter
                     unmodifiedRect={highlighterData?.rect}
                     displayedSelector={highlighterData?.selector}
-                    width={width}
-                    height={height}
+                    width={900}
+                    height={300}
                     canvasRect={canvasRef.current.getBoundingClientRect()}
                 />
                 : null}
             <Canvas
                 onCreateRef={setCanvasReference}
-                width={width}
-                height={height}
+                width={900}
+                height={300}
             />
         </div>
     );
@@ -383,7 +383,7 @@ const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
     img.src = image;
     img.onload = () => {
         URL.revokeObjectURL(img.src);
-        ctx?.drawImage(img, 0, 0, 1280, 720);
+        ctx?.drawImage(img, 0, 0, 900, 300);
     };
 
 };

src/components/organisms/LeftSidePanel.tsx

@@ -63,7 +63,7 @@ export const LeftSidePanel = (
       if (id) {
         fetchWorkflow(id, workflowHandler);
       }
-    }, (1000 * 60 * 15));
+    }, (900 * 60 * 15));
     return () => clearInterval(interval)
   }, [id]);
 

src/components/organisms/ProxyForm.tsx

@@ -87,7 +87,7 @@ const ProxyForm: React.FC = () => {
             <Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
                 Proxy Configuration
             </Typography>
-            <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 400, width: '100%' }}>
+            <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 300, width: '100%' }}>
                 <FormControl>
                     <TextField
                         label="Proxy Server URL"

src/components/organisms/RightSidePanel.tsx

@@ -78,7 +78,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       if (id) {
         fetchWorkflow(id, workflowHandler);
       }
-    }, (1000 * 60 * 15));
+    }, (900 * 60 * 15));
     return () => {
       socket?.off("workflow", workflowHandler);
       clearInterval(interval);
@@ -408,7 +408,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
               sx={{
                 display: 'flex',
                 flexDirection: 'column',
-                width: '500px'
+                width: '300px'
               }}
             >
               <FormControlLabel value="10" control={<Radio />} label="10" />