💄 Change module enabler layout

src/components/Settings/ModuleEnabler.tsx

@@ -1,4 +1,4 @@
-import { Group, Switch } from '@mantine/core';
+import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
 import * as Modules from '../modules';
 import { useConfig } from '../../tools/state';
 
@@ -7,26 +7,29 @@ export default function ModuleEnabler(props: any) {
   const modules = Object.values(Modules).map((module) => module);
   return (
     <Group direction="column">
-      {modules.map((module) => (
-        <Switch
-          key={module.title}
-          size="md"
-          checked={config.modules?.[module.title]?.enabled ?? false}
-          label={`Enable ${module.title}`}
-          onChange={(e) => {
-            setConfig({
-              ...config,
-              modules: {
-                ...config.modules,
-                [module.title]: {
-                  ...config.modules?.[module.title],
-                  enabled: e.currentTarget.checked,
+      <Title order={4}>Module enabler</Title>
+      <SimpleGrid cols={3} spacing="xl">
+        {modules.map((module) => (
+          <Checkbox
+            key={module.title}
+            size="md"
+            checked={config.modules?.[module.title]?.enabled ?? false}
+            label={`${module.title}`}
+            onChange={(e) => {
+              setConfig({
+                ...config,
+                modules: {
+                  ...config.modules,
+                  [module.title]: {
+                    ...config.modules?.[module.title],
+                    enabled: e.currentTarget.checked,
+                  },
                 },
-              },
-            });
-          }}
-        />
-      ))}
+              });
+            }}
+          />
+        ))}
+      </SimpleGrid>
     </Group>
   );
 }