Layout: add global main tag padding

apps/web/Components/Admin/Layout.tsx

@@ -4,7 +4,6 @@ import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { Menu } from 'ui/elements';
 import { DatabaseOutlined, HomeOutlined } from 'ui/elements/icons';
-import { Flex } from 'ui/grid';
 
 const items: MenuProps['items'] = [
   {
@@ -25,6 +24,10 @@ const Wrapper = styled.div`
     height: calc(100vh - var(--height-header));
     overflow-y: scroll;
   }
+
+  ${min('desktop-xl')} {
+    height: calc(calc(100vh - var(--height-header)) - 16px);
+  }
 `;
 
 const MenuWrapper = styled(Wrapper)`
@@ -38,6 +41,10 @@ const ContentWrapper = styled(Wrapper)`
   flex: 1;
 `;
 
+const Flex = styled.div`
+  display: flex;
+`;
+
 export function Layout({ children }: PropsWithChildren) {
   return (
     <Flex>

apps/web/Components/Calculation/Layout.jsx

@@ -17,8 +17,4 @@ export const Layout = styled(Box)`
     grid-template-columns: 2fr 1fr 1.5fr;
     /* margin: 8px 5%; */
   }
-
-  ${min('desktop-xl')} {
-    margin: 8px 10% !important;
-  }
 `;

apps/web/Components/Layout/index.jsx

@@ -1,10 +1,18 @@
 import Header from './Header';
+import { min } from '@/styles/mq';
+import styled from 'styled-components';
+
+const Main = styled.main`
+  ${min('desktop-xl')} {
+    padding: 8px 10% !important;
+  }
+`;
 
 export default function Layout({ children }) {
   return (
     <>
       <Header />
-      <main>{children}</main>
+      <Main>{children}</Main>
     </>
   );
 }