Merge pull request #771 from ajnart/mantine-v6

🎉 Move to Mantine v6

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -29,7 +29,7 @@ export const GenericAvailableElementType = ({
       : image;
 
   return (
-    <Grid.Col span={3}>
+    <Grid.Col span="auto">
       <Card style={{ height: '100%' }}>
         <Stack justify="space-between" style={{ height: '100%' }}>
           <Stack spacing="xs">

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -19,7 +19,7 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
         they don't integrate with any apps and their content never changes.
       </Text>
 
-      <Grid>
+      <Grid grow>
         <GenericAvailableElementType
           name="Static Text"
           description="Display a fixed string on your dashboard"

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -93,12 +93,10 @@ export const AppTile = ({ className, app }: AppTileProps) => {
 
 const useStyles = createStyles((theme, _params, getRef) => ({
   image: {
-    ref: getRef('image'),
     maxHeight: '90%',
     maxWidth: '90%',
   },
   appName: {
-    ref: getRef('appName'),
     wordBreak: 'break-word',
   },
   button: {

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -18,12 +18,11 @@ interface GridstackStoreType {
 
 export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | null => {
   const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
-  const { sm, xl } = useMantineTheme().breakpoints;
   if (!mainAreaWidth) return null;
 
-  if (mainAreaWidth >= xl) return 'large';
+  if (mainAreaWidth >= 1400) return 'large';
 
-  if (mainAreaWidth >= sm) return 'medium';
+  if (mainAreaWidth >= 800) return 'medium';
 
   return 'small';
 };