Torrent module adjustments for mobile users

src/modules/torrents/TorrentsModule.tsx

@@ -13,7 +13,7 @@ import {
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
-import { useViewportSize } from '@mantine/hooks';
+import { useElementSize } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 import { useTranslation } from 'next-i18next';
@@ -34,15 +34,10 @@ export const TorrentsModule: IModule = {
       value: false,
     },
   },
-  padding: {
-    right: 0,
-    top: -10,
-  },
 };
 
 export default function TorrentsComponent() {
   const { config } = useConfig();
-  const { height, width } = useViewportSize();
   const downloadServices =
     config.services.filter(
       (service) =>
@@ -56,6 +51,7 @@ export default function TorrentsComponent() {
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
   const setSafeInterval = useSetSafeInterval();
   const [isLoading, setIsLoading] = useState(true);
+  const { ref, width, height } = useElementSize();
 
   const { t } = useTranslation(`modules/${TorrentsModule.id}`);
 
@@ -112,14 +108,13 @@ export default function TorrentsComponent() {
       </>
     );
   }
-  const DEVICE_WIDTH = 576;
   const ths = (
-    <tr>
+    <tr ref={ref}>
       <th>{t('card.table.header.name')}</th>
       <th>{t('card.table.header.size')}</th>
-      {width > 576 ? <th>{t('card.table.header.download')}</th> : ''}
-      {width > 576 ? <th>{t('card.table.header.upload')}</th> : ''}
-      <th>{t('card.table.header.estimatedTimeOfArrival')}</th>
+      {width > 576 ? <th>{t('card.table.header.download')}</th> : null}
+      {width > 576 ? <th>{t('card.table.header.upload')}</th> : null}
+      {width > 576 ? <th>{t('card.table.header.estimatedTimeOfArrival')}</th> : null}
       <th>{t('card.table.header.progress')}</th>
     </tr>
   );
@@ -178,9 +173,11 @@ export default function TorrentsComponent() {
           ) : (
             ''
           )}
+          {width > 576 ? (
             <td>
               <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
             </td>
+          ) : null}
           <td>
             <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
             <Progress