Uneven side borders issue fix

Strexas · Aug 26, 2024 · 97ac505 · 97ac505
1 parent d09cd0e
commit 97ac505
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx
@@ -107,7 +107,14 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
           Version 1.0.02 {/* TODO: add application context provider to get values of it */}
         </Typography>
       </Box>
-      <Box sx={{ width: '100%', height: 'calc(100vh - max(4%, 2.5rem))', display: 'flex', flexDirection: 'row' }}>
+      <Box
+        sx={{
+          width: 'calc(100vw - 0.5rem)',
+          height: 'calc(100vh - max(4%, 2.5rem))',
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+      >
         <Box sx={{ width: '5vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
           <Box
             sx={{
@@ -158,7 +165,14 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
             />
           </Box>
         </Box>
-        <Box sx={{ width: '95.75%', height: '99.5%', borderRadius: '0.625rem', bgcolor: Theme.palette.secondary.main }}>
+        <Box
+          sx={{
+            width: '95.75%',
+            height: 'calc(100% - 0.5rem)',
+            borderRadius: '0.625rem',
+            bgcolor: Theme.palette.secondary.main,
+          }}
+        >
           {children}
         </Box>
         <SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />