🔀 Merge branch 'dev' into next-13

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

src/modules/common/MediaDisplay.tsx

@@ -180,7 +180,7 @@ export function MediaDisplay({ media }: { media: IMedia }) {
   const { t } = useTranslation('modules/common-media-cards');
 
   return (
-    <Group mr="xs" align="stretch" noWrap style={{ maxHeight: 250, maxWidth: 400 }} spacing="xs">
+    <Group noWrap style={{ maxHeight: 250, maxWidth: 400 }} p={0} m={0} spacing="xs">
       <Image src={media.poster} height={200} width={150} radius="md" fit="cover" />
       <Stack justify="space-around">
         <Stack spacing="sm">
@@ -223,7 +223,7 @@ export function MediaDisplay({ media }: { media: IMedia }) {
             {media.overview}
           </Text>
         </Stack>
-        <Group noWrap>
+        <Group spacing="xs">
           {media.plexUrl && (
             <Button
               component="a"