Fix usenet pageination

src/widgets/useNet/UseNetTile.tsx

@@ -46,11 +46,13 @@ const definition = defineWidget({
   },
 });
 
-export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
+export type IUsenetWidget = IWidget<typeof definition['id'], typeof definition>;
 
-interface UseNetTileProps {}
+interface UseNetTileProps {
+  widget: IUsenetWidget;
+}
 
-function UseNetTile({}: UseNetTileProps) {
+function UseNetTile({ widget }: UseNetTileProps) {
   const { t } = useTranslation('modules/usenet');
   const { config } = useConfigContext();
   const downloadApps =

src/widgets/useNet/UsenetHistoryList.tsx

@@ -4,8 +4,8 @@ import {
   Code,
   Group,
   Pagination,
-  ScrollArea,
   Skeleton,
+  Stack,
   Table,
   Text,
   Title,
@@ -28,7 +28,7 @@ interface UsenetHistoryListProps {
   appId: string;
 }
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 13;
 
 export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ appId }) => {
   const [page, setPage] = useState(1);
@@ -81,8 +81,7 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
   }
 
   return (
-    <>
-      <ScrollArea style={{ flex: 1 }}>
+    <Stack justify="space-around" spacing="xs">
       <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
         <thead>
           <tr>
@@ -122,9 +121,9 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
           ))}
         </tbody>
       </Table>
-      </ScrollArea>
       {totalPages > 1 && (
         <Pagination
+          noWrap
           size="sm"
           position="center"
           mt="md"
@@ -133,6 +132,6 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ a
           onChange={setPage}
         />
       )}
-    </>
+    </Stack>
   );
 };

src/widgets/useNet/UsenetQueueList.tsx

@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Alert,
+  Button,
   Center,
   Code,
   Group,
@@ -8,6 +9,7 @@ import {
   Progress,
   ScrollArea,
   Skeleton,
+  Stack,
   Table,
   Text,
   Title,
@@ -30,7 +32,7 @@ interface UsenetQueueListProps {
   appId: string;
 }
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 13;
 
 export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId }) => {
   const theme = useMantineTheme();
@@ -38,7 +40,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
   const progressbarBreakpoint = theme.breakpoints.xs;
   const progressBreakpoint = 400;
   const sizeBreakpoint = 300;
-  const { ref, width, height } = useElementSize();
+  const { ref, width } = useElementSize();
 
   const [page, setPage] = useState(1);
   const { data, isLoading, isError, error } = useGetUsenetDownloads({
@@ -85,9 +87,9 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
     );
   }
 
+  // TODO: Set ScollArea dynamic height based on the widget size
   return (
-    <>
-      <ScrollArea style={{ flex: 1 }}>
+    <Stack justify="space-around" spacing="xs">
       <Table highlightOnHover style={{ tableLayout: 'fixed' }} ref={ref}>
         <thead>
           <tr>
@@ -171,17 +173,16 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
           ))}
         </tbody>
       </Table>
-      </ScrollArea>
       {totalPages > 1 && (
         <Pagination
+          noWrap
           size="sm"
           position="center"
-          mt="md"
           total={totalPages}
           page={page}
           onChange={setPage}
         />
       )}
-    </>
+    </Stack>
   );
 };