feat: change width to 70% of window

src/components/browser/BrowserContent.tsx

@@ -146,7 +146,7 @@ export const BrowserContent = () => {
       />
       <BrowserNavBar
         // todo: use width from browser dimension once fixed
-        browserWidth={window.innerWidth * 0.75}
+        browserWidth={window.innerWidth * 0.7}
         handleUrlChanged={handleUrlChanged}
 
       />

src/components/browser/BrowserNavBar.tsx

@@ -15,7 +15,7 @@ const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
     display: flex;
     padding: 12px 0px;
     background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')};
-    width: 100%;
+    width: ${window.innerWidth * 0.7}px;
     border-radius: 0px 5px 0px 0px;
 `;
 

src/components/browser/BrowserWindow.tsx

@@ -76,7 +76,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.75, height: window.innerHeight * 0.64 });
+    const [viewportInfo, setViewportInfo] = useState<ViewportInfo>({ width: window.innerWidth * 0.7, height: window.innerHeight * 0.64 });
 
     const [listSelector, setListSelector] = useState<string | null>(null);
     const [fields, setFields] = useState<Record<string, TextStep>>({});
@@ -91,7 +91,7 @@ export const BrowserWindow = () => {
     const { user } = state;
 
     useEffect(() => {
-        coordinateMapper.updateDimensions(window.innerWidth * 0.75, window.innerHeight * 0.64, viewportInfo.width, viewportInfo.height);
+        coordinateMapper.updateDimensions(window.innerWidth * 0.7, window.innerHeight * 0.64, viewportInfo.width, viewportInfo.height);
     }, [viewportInfo]);
 
     useEffect(() => {
@@ -479,7 +479,7 @@ export const BrowserWindow = () => {
     }, [paginationMode, resetPaginationSelector]);
 
     return (
-        <div onClick={handleClick} style={{ width: '100%' }} id="browser-window">
+        <div onClick={handleClick} style={{ width: window.innerWidth * 0.7 }} id="browser-window">
             {
                 getText === true || getList === true ? (
                     <GenericModal
@@ -530,14 +530,14 @@ export const BrowserWindow = () => {
                     <Highlighter
                         unmodifiedRect={highlighterData?.rect}
                         displayedSelector={highlighterData?.selector}
-                        width={window.innerWidth * 0.75}
+                        width={window.innerWidth * 0.7}
                         height={window.innerHeight * 0.64}
                         canvasRect={canvasRef.current.getBoundingClientRect()}
                     />
                     : null}
                 <Canvas
                     onCreateRef={setCanvasReference}
-                    width={window.innerWidth * 0.75}
+                    width={window.innerWidth * 0.7}
                     height={window.innerHeight * 0.64}
                 />
             </div>
@@ -554,7 +554,7 @@ const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
     img.src = image;
     img.onload = () => {
         URL.revokeObjectURL(img.src);
-        ctx?.drawImage(img, 0, 0, window.innerWidth * 0.75, window.innerHeight * 0.64);
+        ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
     };
 
 };

src/components/recorder/canvas.tsx

@@ -78,7 +78,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
     }, [getText, getList]);
 
     useEffect(() => {
-        coordinateMapper.updateDimensions(window.innerWidth * 0.75, window.innerHeight * 0.64);
+        coordinateMapper.updateDimensions(window.innerWidth * 0.7, window.innerHeight * 0.64);
     }, []);
 
     useEffect(() => {

src/components/run/InterpretationLog.tsx

@@ -142,7 +142,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
             background: '#ff00c3',
             border: 'none',
             padding: '10px 20px',
-            width: "100%",
+            width: window.innerWidth * 0.7,
             overflow: 'hidden',
             textAlign: 'left',
             justifyContent: 'flex-start',
@@ -165,7 +165,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
               color: `${darkMode ? 'white' : 'black'}`,
               padding: '10px',
               height: window.innerHeight * 0.7,
-              width: window.innerWidth * 0.75,
+              width: window.innerWidth * 0.7,
               display: 'flex',
               borderRadius: '10px 10px 0 0',
             },

src/context/browserDimensions.tsx

@@ -7,7 +7,7 @@ interface BrowserDimensions {
 };
 
 class BrowserDimensionsStore implements Partial<BrowserDimensions> {
-  width: number = window.innerWidth * 0.75;
+  width: number = window.innerWidth * 0.7;
   height: number = window.innerHeight * 0.64;
 };
 

src/helpers/coordinateMapper.ts

@@ -7,7 +7,7 @@ export class CoordinateMapper {
   private browserHeight: number;
   
   constructor(
-    canvasWidth: number = window.innerWidth * 0.75, 
+    canvasWidth: number = window.innerWidth * 0.7, 
     canvasHeight: number = window.innerHeight * 0.64,
     browserWidth: number = BROWSER_DEFAULT_WIDTH,
     browserHeight: number = BROWSER_DEFAULT_HEIGHT