From ba0bea348b380657ae9819a6d609b8cea4eb99aa Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Fri, 18 Oct 2024 19:07:31 +0530
Subject: [PATCH] wip: scrollable recording ui

---
 src/components/molecules/InterpretationLog.tsx | 6 +++---
 src/components/organisms/BrowserContent.tsx    | 2 +-
 src/components/organisms/BrowserWindow.tsx     | 4 +++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index e7da5791..581ab62d 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/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'
           }
diff --git a/src/components/organisms/BrowserContent.tsx b/src/components/organisms/BrowserContent.tsx
index f1d59d8a..1df71474 100644
--- a/src/components/organisms/BrowserContent.tsx
+++ b/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}
diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index d669873d..ff188656 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/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>
     );
 };