♻️ Improve customization page

src/components/Board/Customize/PageMetadata/PageMetadataCustomization.tsx

@@ -1,4 +1,4 @@
-import { Stack, TextInput } from '@mantine/core';
+import { Grid, Stack, TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 
 import { useBoardCustomizationFormContext } from '../form';
@@ -7,31 +7,39 @@ export const PageMetadataCustomization = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const form = useBoardCustomizationFormContext();
   return (
-    <Stack spacing="sm">
+    <Grid gutter="md" align="stretch">
+      <Grid.Col span={12} sm={6}>
         <TextInput
           label={t('pageTitle.label')}
           description={t('pageTitle.description')}
           placeholder="homarr"
           {...form.getInputProps('pageMetadata.pageTitle')}
         />
+      </Grid.Col>
+      <Grid.Col span={12} sm={6}>
         <TextInput
           label={t('metaTitle.label')}
           description={t('metaTitle.description')}
           placeholder="homarr - the best dashboard"
           {...form.getInputProps('pageMetadata.metaTitle')}
         />
+      </Grid.Col>
+      <Grid.Col span={12} sm={6}>
         <TextInput
           label={t('logo.label')}
           description={t('logo.description')}
           placeholder="/imgs/logo/logo.png"
           {...form.getInputProps('pageMetadata.logoSrc')}
         />
+      </Grid.Col>
+      <Grid.Col span={12} sm={6}>
         <TextInput
           label={t('favicon.label')}
           description={t('favicon.description')}
           placeholder="/imgs/favicon/favicon.svg"
           {...form.getInputProps('pageMetadata.faviconSrc')}
         />
-    </Stack>
+      </Grid.Col>
+    </Grid>
   );
 };