🚧 Work in progress for Mantine v5

src/modules/downloads/DownloadsModule.tsx

@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Center,
   Image,
+  Stack,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
@@ -187,13 +188,8 @@ export default function DownloadComponent() {
       );
     });
 
-  const easteregg = (
-    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
-    </Center>
-  );
   return (
-    <Group noWrap grow direction="column" mt="xl">
+    <Stack mt="xl">
       <ScrollArea sx={{ height: 300 }}>
         {rows.length > 0 ? (
           <Table highlightOnHover>
@@ -201,9 +197,15 @@ export default function DownloadComponent() {
             <tbody>{rows}</tbody>
           </Table>
         ) : (
-          easteregg
+          <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Image
+              fit="cover"
+              height={300}
+              src="https://danjohnvelasco.github.io/images/empty.png"
+            />
+          </Center>
         )}
       </ScrollArea>
-    </Group>
+    </Stack>
   );
 }