🚧 WIP on Mantine V6

src/components/Config/ConfigChanger.tsx

@@ -57,7 +57,12 @@ export default function ConfigChanger() {
         size="lg"
         radius="md"
       >
-        <Notification loading title={t('configSelect.loadingNew')} radius="md" disallowClose>
+        <Notification
+          loading
+          title={t('configSelect.loadingNew')}
+          radius="md"
+          withCloseButton={false}
+        >
           {t('configSelect.pleaseWait')}
         </Notification>
       </Dialog>

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';
 };

src/components/Settings/Common/CommonSettings.tsx

@@ -18,7 +18,7 @@ export default function CommonSettings() {
     );
   }
   return (
-    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+    <ScrollArea style={{ height: height - 100 }} scrollbarSize={5}>
       <Stack>
         <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
         <Space />

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -60,6 +60,7 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => {
             <Space mb="md" />
             <TextInput
               label={t('customEngine.label')}
+              name={t('configurationName')}
               description={t('tips.placeholderTip')}
               placeholder={t('customEngine.placeholder')}
               value={searchUrl}

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -8,7 +8,7 @@ export default function CustomizationSettings() {
   const { t } = useTranslation('settings/customization/general');
 
   return (
-    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+    <ScrollArea style={{ height: height - 100 }} scrollbarSize={5}>
       <Stack mt="xs" mb="md" spacing="xs">
         <Text color="dimmed">
           {t('text')}

src/components/Settings/SettingsDrawer.tsx

@@ -41,7 +41,7 @@ export function SettingsDrawer({
 
   return (
     <Drawer
-      size="xl"
+      size="lg"
       padding="lg"
       position="right"
       title={<Title order={5}>{t('title')}</Title>}

src/components/layout/header/Search.tsx

@@ -181,7 +181,6 @@ export function Search() {
         shadow="md"
         radius="md"
         zIndex={100}
-        transition="pop-top-right"
       >
         <Popover.Target>
           <Autocomplete
@@ -297,7 +296,7 @@ export function Search() {
     setSearchEngine(item);
     showNotification({
       radius: 'lg',
-      disallowClose: true,
+      withCloseButton: false,
       id: 'spotlight',
       autoClose: 1000,
       icon: <ActionIcon size="sm">{item.icon}</ActionIcon>,