Fix docker module for mobile

Signed-off-by: ajnart <thomascamlong@gmail.com>

src/modules/docker/ContainerActionBar.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { Button, Group, TextInput, Title } from '@mantine/core';
+import { Button, Group } from '@mantine/core';
-import { closeAllModals, closeModal, openModal } from '@mantine/modals';
+import { closeModal, openModal } from '@mantine/modals';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
@@ -72,7 +72,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
   const { config, setConfig } = useConfig();
 
   return (
-    <Group>
+    <Group spacing="xs">
       <Button
         leftIcon={<IconRefresh />}
         onClick={() => {

src/modules/docker/DockerTable.tsx

@@ -1,4 +1,5 @@
 import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
@@ -26,6 +27,7 @@ export default function DockerTable({
   const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');
+  const { ref, width, height } = useElementSize();
 
   const { t } = useTranslation('modules/docker');
 
@@ -67,7 +69,8 @@ export default function DockerTable({
           />
         </td>
         <td>{element.Names[0].replace('/', '')}</td>
-        <td>{element.Image}</td>
+        {width > 576 ? <td>{element.Image}</td> : null}
+        {width > 576 ? (
           <td>
             <Group>
               {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -89,6 +92,7 @@ export default function DockerTable({
               )}
             </Group>
           </td>
+        ) : null}
         <td>
           <ContainerState state={element.State} />
         </td>
@@ -106,7 +110,7 @@ export default function DockerTable({
         onChange={handleSearchChange}
         disabled={usedContainers.length === 0}
       />
-      <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
+      <Table ref={ref} captionSide="bottom" highlightOnHover verticalSpacing="sm">
         <thead>
           <tr>
             <th style={{ width: 40 }}>
@@ -119,8 +123,8 @@ export default function DockerTable({
               />
             </th>
             <th>{t('table.header.name')}</th>
-            <th>{t('table.header.image')}</th>
+            {width > 576 ? <th>{t('table.header.image')}</th> : null}
-            <th>{t('table.header.ports')}</th>
+            {width > 576 ? <th>{t('table.header.ports')}</th> : null}
             <th>{t('table.header.state')}</th>
           </tr>
         </thead>