From e6536d89f00d934c4e3823f9f79f45ab8e9f47a0 Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Sun, 29 Jun 2025 09:57:11 -0500
Subject: [PATCH] feat(web): add dynamic page sizing

---
 web/src/app/globals.css                       |  8 -----
 .../components/filterlist-table/columns.tsx   |  4 +--
 web/src/components/filterlist-table/index.tsx | 19 +++++++-----
 .../use-calculate-page-size.ts                | 30 +++++++++++++++++++
 4 files changed, 43 insertions(+), 18 deletions(-)
 create mode 100644 web/src/components/filterlist-table/use-calculate-page-size.ts

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 1df336331..c4fb0e259 100644
--- a/web/src/app/globals.css
+++ b/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);
diff --git a/web/src/components/filterlist-table/columns.tsx b/web/src/components/filterlist-table/columns.tsx
index 338401b54..f436794b3 100644
--- a/web/src/components/filterlist-table/columns.tsx
+++ b/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,
   }),
diff --git a/web/src/components/filterlist-table/index.tsx b/web/src/components/filterlist-table/index.tsx
index e4797a27f..e6e844309 100644
--- a/web/src/components/filterlist-table/index.tsx
+++ b/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>
diff --git a/web/src/components/filterlist-table/use-calculate-page-size.ts b/web/src/components/filterlist-table/use-calculate-page-size.ts
new file mode 100644
index 000000000..13e664e45
--- /dev/null
+++ b/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]);
+}