From e20149a93c83ae4bd93a5d773b59b8384b79a8ea Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Tue, 31 Jan 2023 18:06:49 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20overflow=20in=20about=20mo?=
 =?UTF-8?q?dal=20and=20docker=20drawer=20#674?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modals/AboutModal}/AboutModal.tsx         | 79 +++++++++++--------
 src/components/layout/header/SettingsMenu.tsx |  2 +-
 src/modules/Docker/DockerModule.tsx           |  9 +++
 src/modules/Docker/DockerTable.tsx            |  2 +-
 4 files changed, 56 insertions(+), 36 deletions(-)
 rename src/components/{About => Dashboard/Modals/AboutModal}/AboutModal.tsx (80%)

diff --git a/src/components/About/AboutModal.tsx b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
similarity index 80%
rename from src/components/About/AboutModal.tsx
rename to src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
index 8d258ebd3..6ec6b6536 100644
--- a/src/components/About/AboutModal.tsx
+++ b/src/components/Dashboard/Modals/AboutModal/AboutModal.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   createStyles,
   Divider,
+  Grid,
   Group,
   HoverCard,
   Modal,
@@ -27,11 +28,11 @@ import { InitOptions } from 'i18next';
 import { i18n, Trans, useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import { ReactNode } from 'react';
-import { CURRENT_VERSION } from '../../../data/constants';
-import { useConfigContext } from '../../config/provider';
-import { useConfigStore } from '../../config/store';
-import { usePrimaryGradient } from '../layout/useGradient';
-import Credits from '../Settings/Common/Credits';
+import { CURRENT_VERSION } from '../../../../../data/constants';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+import { usePrimaryGradient } from '../../../layout/useGradient';
+import Credits from '../../../Settings/Common/Credits';
 
 interface AboutModalProps {
   opened: boolean;
@@ -85,35 +86,45 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
         {t('layout/modals/about:contact')}
       </Title>
 
-      <Group grow>
-        <Button
-          component="a"
-          href="https://github.com/ajnart/homarr"
-          target="_blank"
-          leftIcon={<IconBrandGithub size={20} />}
-          variant="default"
-        >
-          GitHub
-        </Button>
-        <Button
-          component="a"
-          href="https://homarr.dev/"
-          target="_blank"
-          leftIcon={<IconWorldWww size={20} />}
-          variant="default"
-        >
-          Documentation
-        </Button>
-        <Button
-          component="a"
-          href="https://discord.gg/aCsmEV5RgA"
-          target="_blank"
-          leftIcon={<IconBrandDiscord size={20} />}
-          variant="default"
-        >
-          Discord
-        </Button>
-      </Group>
+      <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>
+        </Grid.Col>
+      </Grid>
       <Credits />
     </Modal>
   );
diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx
index c525d1afd..e02fe5571 100644
--- a/src/components/layout/header/SettingsMenu.tsx
+++ b/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';
diff --git a/src/modules/Docker/DockerModule.tsx b/src/modules/Docker/DockerModule.tsx
index 684178dd9..91de2247b 100644
--- a/src/modules/Docker/DockerModule.tsx
+++ b/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>
diff --git a/src/modules/Docker/DockerTable.tsx b/src/modules/Docker/DockerTable.tsx
index 70f597d23..b2ba3c3c2 100644
--- a/src/modules/Docker/DockerTable.tsx
+++ b/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"