Merge pull request #675 from ajnart/fix-overflow-docker-drawer

💄 Fix overflow in about modal and docker drawer #674

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   createStyles,
   Divider,
+  Grid,
   Group,
   HoverCard,
   Modal,
@@ -86,35 +87,45 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
         {t('layout/modals/about:contact')}
       </Title>
 
-      <Group grow>
+      <Grid grow>
+        <Grid.Col md={4} xs={12}>
           <Button
             component="a"
             href="https://github.com/ajnart/homarr"
             target="_blank"
             leftIcon={<IconBrandGithub size={20} />}
             variant="default"
+            fullWidth
           >
             GitHub
           </Button>
+        </Grid.Col>
+        <Grid.Col md={4} xs={12}>
           <Button
             component="a"
             href="https://homarr.dev/"
             target="_blank"
             leftIcon={<IconWorldWww size={20} />}
             variant="default"
+            fullWidth
           >
             Documentation
           </Button>
+        </Grid.Col>
+
+        <Grid.Col md={4} xs={12}>
           <Button
             component="a"
             href="https://discord.gg/aCsmEV5RgA"
             target="_blank"
             leftIcon={<IconBrandDiscord size={20} />}
             variant="default"
+            fullWidth
           >
             Discord
           </Button>
-      </Group>
+        </Grid.Col>
+      </Grid>
       <Credits />
     </Modal>
   );

src/components/layout/header/SettingsMenu.tsx

@@ -2,7 +2,7 @@ import { Badge, Button, Menu } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
-import { AboutModal } from '../../About/AboutModal';
+import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { useCardStyles } from '../useCardStyles';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';

src/modules/Docker/DockerModule.tsx

@@ -68,6 +68,15 @@ export default function DockerMenuButton(props: any) {
         position="right"
         size="full"
         title={<ContainerActionBar selected={selection} reload={reload} />}
+        styles={{
+          drawer: {
+            display: 'flex',
+            flexDirection: 'column',
+          },
+          body: {
+            minHeight: 0,
+          },
+        }}
       >
         <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
       </Drawer>

src/modules/Docker/DockerTable.tsx

@@ -120,7 +120,7 @@ export default function DockerTable({
   });
 
   return (
-    <ScrollArea style={{ height: '90vh' }} offsetScrollbars>
+    <ScrollArea style={{ height: '100%' }} offsetScrollbars>
       <TextInput
         placeholder={t('search.placeholder')}
         mr="md"