make pages table responsive

apps/client/src/components/common/recent-changes.tsx

@@ -1,4 +1,11 @@
-import { Text, Group, UnstyledButton, Badge, Table } from "@mantine/core";
+import {
+  Text,
+  Group,
+  UnstyledButton,
+  Badge,
+  Table,
+  ScrollArea,
+} from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -22,6 +29,7 @@ export default function RecentChanges({ spaceId }: Props) {
   }
 
   return pages && pages.items.length > 0 ? (
+    <ScrollArea>
       <Table highlightOnHover verticalSpacing="sm">
         <Table.Tbody>
           {pages.items.map((page) => (
@@ -62,6 +70,7 @@ export default function RecentChanges({ spaceId }: Props) {
           ))}
         </Table.Tbody>
       </Table>
+    </ScrollArea>
   ) : (
     <Text size="md" ta="center">
       No pages yet