🔀 Merge branch 'dev' into tests/add-tests

src/modules/Docker/ContainerActionBar.tsx

@@ -35,7 +35,7 @@ function sendDockerCommand(
     title: `${t(`actions.${action}.start`)} ${containerName}`,
     message: undefined,
     autoClose: false,
-    disallowClose: true,
+    withCloseButton: false,
   });
   axios
     .get(`/api/docker/container/${containerId}?action=${action}`)

src/modules/Docker/ContainerState.tsx

@@ -1,4 +1,4 @@
-import { Badge, BadgeVariant, MantineSize } from '@mantine/core';
+import { Badge, BadgeProps, MantineSize } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import Dockerode from 'dockerode';
 
@@ -14,7 +14,7 @@ export default function ContainerState(props: ContainerStateProps) {
   const options: {
     size: MantineSize;
     radius: MantineSize;
-    variant: BadgeVariant;
+    variant: BadgeProps['variant'];
   } = {
     size: 'md',
     radius: 'md',

src/modules/Docker/DockerModule.tsx

@@ -54,7 +54,7 @@ export default function DockerMenuButton(props: any) {
     }, 300);
   }
 
-  if (!dockerEnabled) {
+  if (!dockerEnabled || process.env.DISABLE_EDIT_MODE === 'true') {
     return null;
   }
 
@@ -66,10 +66,13 @@ export default function DockerMenuButton(props: any) {
         onClose={() => setOpened(false)}
         padding="xl"
         position="right"
-        size="full"
+        size="100%"
         title={<ContainerActionBar selected={selection} reload={reload} />}
+        transitionProps={{
+          transition: 'pop',
+        }}
         styles={{
-          drawer: {
+          content: {
             display: 'flex',
             flexDirection: 'column',
           },

src/modules/Docker/DockerTable.tsx

@@ -14,6 +14,7 @@ import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
+import { MIN_WIDTH_MOBILE } from '../../constants/constants';
 import ContainerState from './ContainerState';
 
 const useStyles = createStyles((theme) => ({
@@ -34,7 +35,6 @@ export default function DockerTable({
   containers: Dockerode.ContainerInfo[];
   selection: Dockerode.ContainerInfo[];
 }) {
-  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
   const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
   const { classes, cx } = useStyles();
   const [search, setSearch] = useState('');