feat: set width to 900

src/components/atoms/canvas.tsx

@@ -142,7 +142,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
             tabIndex={0}
             ref={canvasRef}
             height={400}
-            width={1150}
+            width={900}
         />
     );
 

src/components/molecules/BrowserNavBar.tsx

@@ -77,7 +77,7 @@ const BrowserNavBar: FC<NavBarProps> = ({
   };
 
   return (
-    <StyledNavBar browserWidth={1150}>
+    <StyledNavBar browserWidth={900}>
       <NavBarButton
         type="button"
         onClick={() => {

src/components/organisms/BrowserContent.tsx

@@ -128,7 +128,7 @@ export const BrowserContent = () => {
       />
       <BrowserNavBar
         // todo: use width from browser dimension once fixed
-        browserWidth={1150}
+        browserWidth={900}
         handleUrlChanged={handleUrlChanged}
       />
       <BrowserWindow />

src/components/organisms/BrowserWindow.tsx

@@ -316,7 +316,7 @@ export const BrowserWindow = () => {
 
 
     return (
-        <div onClick={handleClick} style={{ width: '1150px'}} id="browser-window">
+        <div onClick={handleClick} style={{ width: '900px'}} id="browser-window">
             {
                 getText === true || getList === true ? (
                     <GenericModal
@@ -361,14 +361,14 @@ export const BrowserWindow = () => {
                 <Highlighter
                     unmodifiedRect={highlighterData?.rect}
                     displayedSelector={highlighterData?.selector}
-                    width={1150}
+                    width={900}
                     height={400}
                     canvasRect={canvasRef.current.getBoundingClientRect()}
                 />
                 : null}
             <Canvas
                 onCreateRef={setCanvasReference}
-                width={1150}
+                width={900}
                 height={400}
             />
             </div>
@@ -385,7 +385,7 @@ const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
     img.src = image;
     img.onload = () => {
         URL.revokeObjectURL(img.src);
-        ctx?.drawImage(img, 0, 0, 1150, 400);
+        ctx?.drawImage(img, 0, 0, 900, 400);
     };
 
 };

src/components/organisms/LeftSidePanel.tsx

@@ -105,7 +105,7 @@ export const LeftSidePanel = (
         flexDirection: 'column',
       }}
     >
-      <SidePanelHeader />
+      {/* <SidePanelHeader /> */}
       <TabContext value={tab}>
         <Tabs value={tab} onChange={(e, newTab) => setTab(newTab)}>
           <Tab label="Recording" value='recording' />

src/constants/const.ts

@@ -1,4 +1,4 @@
-export const VIEWPORT_W = 1150;
+export const VIEWPORT_W = 900;
 export const VIEWPORT_H = 400;
 
 export const ONE_PERCENT_OF_VIEWPORT_W = VIEWPORT_W / 100;

src/context/browserDimensions.tsx

@@ -7,7 +7,7 @@ interface BrowserDimensions {
 };
 
 class BrowserDimensionsStore implements Partial<BrowserDimensions> {
-  width: number = 1150;
+  width: number = 900;
   height: number = 400;
 };