From 863cff1dfca32b20e2c8e9cdc582ace3a582d086 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Fri, 4 Aug 2023 21:54:33 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Improve=20customization=20?=
 =?UTF-8?q?page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PageMetadataCustomization.tsx             | 62 +++++++++++--------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/components/Board/Customize/PageMetadata/PageMetadataCustomization.tsx b/src/components/Board/Customize/PageMetadata/PageMetadataCustomization.tsx
index a2f657123..a8af57b18 100644
--- a/src/components/Board/Customize/PageMetadata/PageMetadataCustomization.tsx
+++ b/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">
-      <TextInput
-        label={t('pageTitle.label')}
-        description={t('pageTitle.description')}
-        placeholder="homarr"
-        {...form.getInputProps('pageMetadata.pageTitle')}
-      />
-      <TextInput
-        label={t('metaTitle.label')}
-        description={t('metaTitle.description')}
-        placeholder="homarr - the best dashboard"
-        {...form.getInputProps('pageMetadata.metaTitle')}
-      />
-      <TextInput
-        label={t('logo.label')}
-        description={t('logo.description')}
-        placeholder="/imgs/logo/logo.png"
-        {...form.getInputProps('pageMetadata.logoSrc')}
-      />
-      <TextInput
-        label={t('favicon.label')}
-        description={t('favicon.description')}
-        placeholder="/imgs/favicon/favicon.svg"
-        {...form.getInputProps('pageMetadata.faviconSrc')}
-      />
-    </Stack>
+    <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')}
+        />
+      </Grid.Col>
+    </Grid>
   );
 };