feat: set position absolute

src/components/molecules/BrowserRecordingSave.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Paper, Grid, IconButton, Button } from '@mui/material';
+import { Paper, Grid, IconButton, Button, Box } from '@mui/material';
 import { SaveRecording } from "./SaveRecording";
 import { Circle, Add, Logout, Clear } from "@mui/icons-material";
 import { useGlobalInfoStore } from '../../context/globalInfo';
@@ -20,30 +20,30 @@ const BrowserRecordingSave = () => {
         navigate('/');
       };
 
-  return (
+      return (
-    <Grid container>
+        <Grid container>
-        <Grid item xs={12} md={3} lg={3}>
+            <Grid item xs={12} md={3} lg={3}>
-            <div style={{
+                <div style={{
-                 marginLeft: '10px',
+                     marginLeft: '10px',
-                 color: 'white',
+                     color: 'white',
-                 position: 'fixed',
+                     position: 'absolute',
-                 background: '#ff00c3',
+                     background: '#ff00c3',
-                 border: 'none',
+                     border: 'none',
-                 padding: '7.5px',
+                     padding: '7.5px',
-                 width: '100%',
+                     width: 'calc(100% - 20px)',  // Ensure it takes full width but with padding
-                 bottom: 0,
+                     bottom: 0,
-                 overflow: 'hidden',
+                     overflow: 'hidden',
-                 display: 'flex',
+                     display: 'flex',
-                 justifyContent: 'space-between',
+                     justifyContent: 'space-between',
-            }}>
+                }}>
-                <Button onClick={goToMainMenu} variant="outlined" sx={{ marginLeft: "20px" }} size="small" color="error">
+                    <Button onClick={goToMainMenu} variant="outlined" sx={{ marginLeft: "20px" }} size="small" color="error">
-                  Discard
+                      Discard
-                </Button>
+                    </Button>
-                <SaveRecording fileName={recordingName} />
+                    <SaveRecording fileName={recordingName} />
-            </div>
+                </div>
-    </Grid>
+            </Grid>
-    </Grid>
+        </Grid>
-  )
+    );
 }
 
 export default BrowserRecordingSave