Merge pull request #853 from RohitR311/recordui-fix

fix: recorder ui bug

Author: amhsirak

src/components/recorder/RightSidePanel.tsx

@@ -534,9 +534,24 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const isDarkMode = theme.darkMode;
 
   return (
-    <Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
+    <Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit', overflow: 'hidden' }} id="browser-actions" elevation={0}>
       <ActionDescriptionBox isDarkMode={isDarkMode} />
-      <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
+      <Box
+        display="flex"
+        flexDirection="column"
+        gap={2}
+        style={{ margin: '13px' }}
+        sx={{
+          height: 'calc(100% - 26px)',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          '&::-webkit-scrollbar': {
+            display: 'none'
+          },
+          msOverflowStyle: 'none',
+          scrollbarWidth: 'none'
+        }}
+      >
         {!isAnyActionActive && (
           <>
             {showCaptureList && (

src/pages/RecordingPage.tsx

@@ -157,7 +157,7 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
             <>
               <Grid container direction="row" style={{ flexGrow: 1, height: '100%' }}>
                 <Grid item xs={12} md={9} lg={9} style={{ height: '100%', overflow: 'hidden', position: 'relative' }}>
-                  <div style={{ height: '100%', overflow: 'auto' }}>
+                  <div style={{ height: '100%', overflow: 'hidden' }}>
                     <BrowserContent />
                     <InterpretationLog isOpen={showOutputData} setIsOpen={setShowOutputData} />
                   </div>