Address PR comments

src/modules/usenet/UsenetModule.tsx

@@ -1,4 +1,14 @@
-import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
+import {
+  Badge,
+  Button,
+  Group,
+  Select,
+  Stack,
+  Tabs,
+  Text,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
 import { IconDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
 import { FunctionComponent, useEffect, useState } from 'react';
 
@@ -50,6 +60,7 @@ export const UsenetComponent: FunctionComponent = () => {
   }
 
   const { ref, width, height } = useElementSize();
+  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
 
   return (
     <Tabs keepMounted={false} defaultValue="queue">
@@ -58,17 +69,14 @@ export const UsenetComponent: FunctionComponent = () => {
         <Tabs.Tab value="history">{t('tabs.history')}</Tabs.Tab>
         {data && (
           <Group position="right" ml="auto">
-                {
+            {width > MIN_WIDTH_MOBILE && (
-                  // Only show if the width is > 400px
-                  width > 400 && (
               <>
                 <Badge>{humanFileSize(data?.speed)}/s</Badge>
                 <Badge>
                   {t('info.sizeLeft')}: {humanFileSize(data?.sizeLeft)}
                 </Badge>
               </>
-                  )
+            )}
-                }
 
             {data.paused ? (
               <Button uppercase onClick={() => resume()} radius="xl" size="xs">