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,28 +69,30 @@ export default function DockerTable({
           />
         </td>
         <td>{element.Names[0].replace('/', '')}</td>
-        <td>{element.Image}</td>
+        {width > 576 ? <td>{element.Image}</td> : null}
-        <td>
+        {width > 576 ? (
-          <Group>
+          <td>
-            {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
+            <Group>
-              // Remove duplicates with filter function
+              {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
-              .filter(
+                // Remove duplicates with filter function
-                (port, index, self) =>
+                .filter(
-                  index === self.findIndex((t) => t.PrivatePort === port.PrivatePort)
+                  (port, index, self) =>
-              )
+                    index === self.findIndex((t) => t.PrivatePort === port.PrivatePort)
-              .slice(-3)
+                )
-              .map((port) => (
+                .slice(-3)
-                <Badge key={port.PrivatePort} variant="outline">
+                .map((port) => (
-                  {port.PrivatePort}:{port.PublicPort}
+                  <Badge key={port.PrivatePort} variant="outline">
+                    {port.PrivatePort}:{port.PublicPort}
+                  </Badge>
+                ))}
+              {element.Ports.length > 3 && (
+                <Badge variant="filled">
+                  {t('table.body.portCollapse', { ports: element.Ports.length - 3 })}
                 </Badge>
-              ))}
+              )}
-            {element.Ports.length > 3 && (
+            </Group>
-              <Badge variant="filled">
+          </td>
-                {t('table.body.portCollapse', { ports: element.Ports.length - 3 })}
+        ) : null}
-              </Badge>
-            )}
-          </Group>
-        </td>
         <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>