feat(web): add dynamic page sizing

web/src/app/globals.css

@@ -121,14 +121,6 @@
   }
 }
 
-.line-clamp-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
 .fade-out-bottom {
   -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
   mask-image: linear-gradient(180deg, #000 60%, transparent);

web/src/components/filterlist-table/columns.tsx

@@ -37,7 +37,7 @@ export const columns = [
       <SortableHeader column={column}>Name</SortableHeader>
     ),
     cell: (info) => (
-      <div className="line-clamp-3 whitespace-normal">{info.getValue()}</div>
+      <div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">{info.getValue()}</div>
     ),
     enableSorting: true,
     size: 200,
@@ -45,7 +45,7 @@ export const columns = [
   columnHelper.accessor((row) => row.description, {
     header: "Description",
     cell: (info) => (
-      <div className="line-clamp-3 whitespace-normal">{info.getValue()}</div>
+      <div className="line-clamp-2 whitespace-normal overflow-hidden text-ellipsis">{info.getValue()}</div>
     ),
     size: 400,
   }),

web/src/components/filterlist-table/index.tsx

@@ -2,12 +2,12 @@
 
 import { useEffect, useState } from "react";
 import {
-  useReactTable,
+  flexRender,
   getCoreRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  flexRender,
   TableMeta,
+  useReactTable,
 } from "@tanstack/react-table";
 import {
   Table,
@@ -17,9 +17,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { columns } from "./columns";
-import { FilterListTablePagination } from "./pagination";
-import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
+import { useCalculatePageSize } from "./use-calculate-page-size";
 import { FilterList, getFilterLists } from "@/services/get-filterlists";
 import { Language } from "@/services/get-languages";
 import { License } from "@/services/get-licenses";
@@ -27,6 +25,9 @@ import { Maintainer } from "@/services/get-maintainers";
 import { Software } from "@/services/get-software";
 import { Syntax } from "@/services/get-syntaxes";
 import { Tag } from "@/services/get-tags";
+import { columns } from "./columns";
+import { FilterListTablePagination } from "./pagination";
+import { FilterListTablePaginationSkeleton } from "./pagination-skeleton";
 
 export interface FilterListsTableMeta extends TableMeta<FilterList> {
   languages: readonly Language[];
@@ -68,7 +69,7 @@ export function FilterListTable({
         setLoading(false);
       }
     })();
-  }, [initialFilterLists.length]);
+  }, []);
 
   const table = useReactTable({
     data,
@@ -86,6 +87,8 @@ export function FilterListTable({
     },
   });
 
+  useCalculatePageSize(table.setPageSize);
+
   return (
     <div className="space-y-2">
       <Table
@@ -122,14 +125,14 @@ export function FilterListTable({
         </TableHeader>
         <TableBody>
           {table.getRowModel().rows.map((row) => (
-            <TableRow key={row.id} className="h-20">
+            <TableRow key={row.id} className="h-16">
               {row.getVisibleCells().map((cell) => (
                 <TableCell
                   key={cell.id}
                   style={{ width: cell.column.getSize() }}
                   className="relative"
                 >
-                  <div className="h-[64px] overflow-hidden">
+                  <div className="h-[42px] overflow-hidden">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </div>
                 </TableCell>

web/src/components/filterlist-table/use-calculate-page-size.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { useCallback, useLayoutEffect } from "react";
+
+const debounce = (func: () => void, delay: number) => {
+  let timeoutId: NodeJS.Timeout;
+  return () => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(func, delay);
+  };
+};
+
+const ROW_HEIGHT = 64;
+const VERTICAL_PADDING = 80 + 32 + 40 + 32 + 24;
+const DEBOUNCE_DELAY = 150;
+
+export function useCalculatePageSize(setPageSize: (size: number) => void) {
+  const calculatePageSize = useCallback(() => {
+    const availableHeight = window.innerHeight - VERTICAL_PADDING;
+    const newPageSize = Math.max(1, Math.floor(availableHeight / ROW_HEIGHT));
+    setPageSize(newPageSize);
+  }, [setPageSize]);
+
+  useLayoutEffect(() => {
+    calculatePageSize();
+    const handleResize = debounce(calculatePageSize, DEBOUNCE_DELAY);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [calculatePageSize]);
+}