wip: scrollable recording ui

src/components/molecules/InterpretationLog.tsx

@@ -106,7 +106,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
   const columns = tableData.length > 0 ? Object.keys(tableData[0]) : [];
 
   return (
-    <div>
+    <div style={{ width: '900px', height: '500px' }}>
       <button
         onClick={toggleDrawer(true)}
         style={{
@@ -114,7 +114,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           background: '#3f4853',
           border: 'none',
           padding: '10px 20px',
-          width: 1280,
+          width: 900,
           textAlign: 'left'
         }}>
         Interpretation Log
@@ -129,7 +129,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
             background: 'white',
             color: 'black',
             padding: '10px',
-            height: 720,
+            height: 500,
             width: width - 10,
             display: 'flex'
           }

src/components/organisms/BrowserContent.tsx

@@ -115,7 +115,7 @@ export const BrowserContent = () => {
   }, [])
 
   return (
-    <div style={{  width: '900px', height: '500px' }}>
+    <div style={{ flexGrow: 1 }}>
       <BrowserTabs
         tabs={tabs}
         handleTabChange={handleTabChange}

src/components/organisms/BrowserWindow.tsx

@@ -316,7 +316,7 @@ export const BrowserWindow = () => {
 
 
     return (
-        <div onClick={handleClick} style={{ width: '900px', height: '500px'}} id="browser-window">
+        <div onClick={handleClick} style={{ width: '900px'}} id="browser-window">
             {
                 getText === true || getList === true ? (
                     <GenericModal
@@ -356,6 +356,7 @@ export const BrowserWindow = () => {
                     </GenericModal>
                 ) : null
             }
+            <div style={{ height: '500px', overflowY: 'auto' }}> {/* Make this section scrollable */}
             {((getText === true || getList === true) && !showAttributeModal && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
                 <Highlighter
                     unmodifiedRect={highlighterData?.rect}
@@ -370,6 +371,7 @@ export const BrowserWindow = () => {
                 width={900}
                 height={500}
             />
+            </div>
         </div>
     );
 };