💄 Docker module improvements

Added a keybind, made the text bigger, offeset the scrollbar, made the table take more space

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"

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">