📱 Fix settings pannels height

src/components/Settings/AdvancedSettings.tsx

@@ -37,7 +37,7 @@ export default function TitleChanger() {
   };
 
   return (
-    <Group direction="column" grow>
+    <Group direction="column" grow mb="lg">
       <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
         <Group grow direction="column">
           <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />

src/components/Settings/CommonSettings.tsx

@@ -1,7 +1,5 @@
-import { ActionIcon, Group, Text, SegmentedControl, TextInput, Anchor } from '@mantine/core';
+import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
 import { useState } from 'react';
-import { IconBrandGithub as BrandGithub, IconBrandDiscord as BrandDiscord } from '@tabler/icons';
-import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import { WidgetsPositionSwitch } from '../WidgetsPositionSwitch/WidgetsPositionSwitch';
@@ -25,7 +23,7 @@ export default function CommonSettings(args: any) {
   );
 
   return (
-    <Group direction="column" grow>
+    <Group direction="column" grow mb="lg">
       <Group grow direction="column" spacing={0}>
         <Text>Search engine</Text>
         <Text
@@ -92,42 +90,6 @@ export default function CommonSettings(args: any) {
       >
         Tip: You can upload your config file by dragging and dropping it onto the page!
       </Text>
-      <Group position="center" direction="row" mr="xs">
-        <Group spacing={0}>
-          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
-            <BrandGithub size={18} />
-          </ActionIcon>
-          <Text
-            style={{
-              position: 'relative',
-              fontSize: '0.90rem',
-              color: 'gray',
-            }}
-          >
-            {CURRENT_VERSION}
-          </Text>
-        </Group>
-        <Group spacing={1}>
-          <Text
-            style={{
-              fontSize: '0.90rem',
-              textAlign: 'center',
-              color: 'gray',
-            }}
-          >
-            Made with ❤️ by @
-            <Anchor
-              href="https://github.com/ajnart"
-              style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-            >
-              ajnart
-            </Anchor>
-          </Text>
-          <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
-            <BrandDiscord size={18} />
-          </ActionIcon>
-        </Group>
-      </Group>
     </Group>
   );
 }

src/components/Settings/Credits.tsx

@@ -0,0 +1,44 @@
+import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
+import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
+import { CURRENT_VERSION } from '../../../data/constants';
+
+export default function Credits(props: any) {
+  return (
+    <Group position="center" direction="row" mr="xs">
+      <Group spacing={0}>
+        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+          <IconBrandGithub size={18} />
+        </ActionIcon>
+        <Text
+          style={{
+            position: 'relative',
+            fontSize: '0.90rem',
+            color: 'gray',
+          }}
+        >
+          {CURRENT_VERSION}
+        </Text>
+      </Group>
+      <Group spacing={1}>
+        <Text
+          style={{
+            fontSize: '0.90rem',
+            textAlign: 'center',
+            color: 'gray',
+          }}
+        >
+          Made with ❤️ by @
+          <Anchor
+            href="https://github.com/ajnart"
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+          >
+            ajnart
+          </Anchor>
+        </Text>
+        <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
+          <IconBrandDiscord size={18} />
+        </ActionIcon>
+      </Group>
+    </Group>
+  );
+}

src/components/Settings/SettingsMenu.tsx

@@ -1,18 +1,23 @@
-import { ActionIcon, Title, Tooltip, Drawer, Tabs } from '@mantine/core';
+import { ActionIcon, Title, Tooltip, Drawer, Tabs, ScrollArea } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
 import { IconSettings } from '@tabler/icons';
 import AdvancedSettings from './AdvancedSettings';
 import CommonSettings from './CommonSettings';
+import Credits from './Credits';
 
 function SettingsMenu(props: any) {
   return (
     <Tabs grow>
       <Tabs.Tab data-autofocus label="Common">
-        <CommonSettings />
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <CommonSettings />
+        </ScrollArea>
       </Tabs.Tab>
       <Tabs.Tab label="Customizations">
-        <AdvancedSettings />
+        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
+          <AdvancedSettings />
+        </ScrollArea>
       </Tabs.Tab>
     </Tabs>
   );
@@ -26,13 +31,14 @@ export function SettingsMenuButton(props: any) {
     <>
       <Drawer
         size="xl"
-        padding="xl"
+        padding="lg"
         position="right"
-        title={<Title order={3}>Settings</Title>}
+        title={<Title order={5}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
         <SettingsMenu />
+        <Credits />
       </Drawer>
       <ActionIcon
         variant="default"