🚧 WIP on Mantine V6

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

@@ -36,7 +36,13 @@ export const AppTile = ({ className, app }: AppTileProps) => {
           className="dashboard-tile-app"
         >
           <Box hidden={false}>
-            <Title order={5} size="md" ta="center" lineClamp={1} className={cx(classes.appName, 'dashboard-tile-app-title')}>
+            <Title
+              order={5}
+              size="md"
+              ta="center"
+              lineClamp={1}
+              className={cx(classes.appName, 'dashboard-tile-app-title')}
+            >
               {app.name}
             </Title>
           </Box>
@@ -87,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,12 @@ 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';
+  // TODO: Calculate rem to pixels using Calc function
+  if (mainAreaWidth >= 1400) return 'large';
 
-  if (mainAreaWidth >= sm) return 'medium';
+  if (mainAreaWidth >= 800) return 'medium';
 
   return 'small';
 };