Upgrade Mantine

4 files changed, 14 insertions, 12 deletions

diff --git a/client/js/app/src/app/components/layout/layout.jsx b/client/js/app/src/app/components/layout/layout.jsx
index f0f5a0594c0..532a9ce3630 100644
--- a/client/js/app/src/app/components/layout/layout.jsx
+++ b/client/js/app/src/app/components/layout/layout.jsx
@@ -3,9 +3,5 @@ import { AppShell } from '@mantine/core';
 import { Header } from 'app/components/layout/header';
 
 export function Layout({ children }) {
-  return (
-    <AppShell header={<Header />} fixed>
-      {children}
-    </AppShell>
-  );
+  return <AppShell header={<Header />}>{children}</AppShell>;
 }
diff --git a/client/js/app/src/app/libs/theme-provider.jsx b/client/js/app/src/app/libs/theme-provider.jsx
index 58496ce15c2..c5e9cbee963 100644
--- a/client/js/app/src/app/libs/theme-provider.jsx
+++ b/client/js/app/src/app/libs/theme-provider.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Global, MantineProvider } from '@mantine/core';
-import { defaultProps, defaultStyles } from 'app/styles/default';
 import { Colors } from 'app/styles/theme/colors';
 import { styles } from 'app/styles/global';
 import { getTheme } from 'app/styles/theme';
@@ -12,11 +11,7 @@ function setColorResolver(theme) {
 
 export function ThemeProvider({ children }) {
   return (
-    <MantineProvider
-      styles={defaultStyles}
-      defaultProps={defaultProps}
-      theme={getTheme()}
-    >
+    <MantineProvider theme={getTheme()}>
       <Global styles={(theme) => styles(setColorResolver(theme))} />
       {children}
     </MantineProvider>
diff --git a/client/js/app/src/app/styles/theme/components.js b/client/js/app/src/app/styles/theme/components.js
new file mode 100644
index 00000000000..0994ad322d0
--- /dev/null
+++ b/client/js/app/src/app/styles/theme/components.js
@@ -0,0 +1,10 @@
+export const components = {
+  AppShell: {
+    styles: () => ({
+      main: {
+        maxWidth: '1920px',
+        margin: '0 auto',
+      },
+    }),
+  },
+};
diff --git a/client/js/app/src/app/styles/theme/index.js b/client/js/app/src/app/styles/theme/index.js
index fbd74bf13fc..2c69eb2af81 100644
--- a/client/js/app/src/app/styles/theme/index.js
+++ b/client/js/app/src/app/styles/theme/index.js
@@ -1,6 +1,7 @@
 import { common } from 'app/styles/theme/common';
+import { components } from 'app/styles/theme/components';
 import { commonColors } from 'app/styles/theme/common-colors';
 
 export const getTheme = () => {
-  return { ...common, colors: commonColors };
+  return { ...common, components, colors: commonColors };
 };