From b770b06ed86aa4d8016f2d91b746ce69a8b2fbd5 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 23 Jan 2023 23:56:38 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Docker=20module=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a keybind, made the text bigger, offeset the scrollbar, made the table take more space
---
 src/modules/Docker/DockerModule.tsx |  3 +++
 src/modules/Docker/DockerTable.tsx  | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/modules/Docker/DockerModule.tsx b/src/modules/Docker/DockerModule.tsx
index cfffbed00..684178dd9 100644
--- a/src/modules/Docker/DockerModule.tsx
+++ b/src/modules/Docker/DockerModule.tsx
@@ -1,4 +1,5 @@
 import { ActionIcon, Drawer, Text, Tooltip } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { IconBrandDocker, IconX } from '@tabler/icons';
 import axios from 'axios';
@@ -17,6 +18,7 @@ export default function DockerMenuButton(props: any) {
   const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
   const { config } = useConfigContext();
   const { classes } = useCardStyles(true);
+  useHotkeys([['mod+B', () => setOpened(!opened)]]);
 
   const dockerEnabled = config?.settings.customization.layout.enabledDocker || false;
 
@@ -60,6 +62,7 @@ export default function DockerMenuButton(props: any) {
     <>
       <Drawer
         opened={opened}
+        trapFocus={false}
         onClose={() => setOpened(false)}
         padding="xl"
         position="right"
diff --git a/src/modules/Docker/DockerTable.tsx b/src/modules/Docker/DockerTable.tsx
index 2925e3990..70f597d23 100644
--- a/src/modules/Docker/DockerTable.tsx
+++ b/src/modules/Docker/DockerTable.tsx
@@ -7,6 +7,7 @@ import {
   ScrollArea,
   TextInput,
   useMantineTheme,
+  Text,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons';
@@ -78,8 +79,16 @@ export default function DockerTable({
             transitionDuration={0}
           />
         </td>
-        <td>{element.Names[0].replace('/', '')}</td>
-        {width > MIN_WIDTH_MOBILE && <td>{element.Image}</td>}
+        <td>
+          <Text size="lg" weight={600}>
+            {element.Names[0].replace('/', '')}
+          </Text>
+        </td>
+        {width > MIN_WIDTH_MOBILE && (
+          <td>
+            <Text size="lg">{element.Image}</Text>
+          </td>
+        )}
         {width > MIN_WIDTH_MOBILE && (
           <td>
             <Group>
@@ -111,12 +120,13 @@ export default function DockerTable({
   });
 
   return (
-    <ScrollArea style={{ height: '80vh' }}>
+    <ScrollArea style={{ height: '90vh' }} offsetScrollbars>
       <TextInput
         placeholder={t('search.placeholder')}
-        mt="md"
+        mr="md"
         icon={<IconSearch size={14} />}
         value={search}
+        autoFocus
         onChange={handleSearchChange}
       />
       <Table ref={ref} captionSide="bottom" highlightOnHover verticalSpacing="sm">