feat(web): add column sizing

web/src/app/globals.css

@@ -120,3 +120,24 @@
     @apply bg-background text-foreground;
   }
 }
+
+.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);
+}
+
+.resizer {
+  @apply absolute right-0 top-0 h-full w-[5px] cursor-col-resize select-none touch-none;
+}
+
+.resizer.isResizing {
+  @apply bg-blue-500 opacity-50;
+}

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

@@ -10,9 +10,17 @@ const columnHelper = createColumnHelper<FilterList>();
 export const columns = [
   columnHelper.accessor((row) => row.name, {
     header: "Name",
+    size: 200,
+    cell: (info) => (
+      <div className="line-clamp-3 whitespace-normal">{info.getValue()}</div>
+    ),
   }),
   columnHelper.accessor((row) => row.description, {
     header: "Description",
+    size: 400,
+    cell: (info) => (
+      <div className="line-clamp-3 whitespace-normal">{info.getValue()}</div>
+    ),
   }),
   columnHelper.accessor((row) => row.syntaxIds, {
     header: "Syntaxes",
@@ -32,8 +40,13 @@ export const columns = [
               ]
             : [];
         }) ?? [];
-      return <BadgeCloud items={syntaxes} />;
+      return (
+        <div className="fade-out-bottom h-full">
+          <BadgeCloud items={syntaxes} />
+        </div>
+      );
     },
+    size: 150,
   }),
   columnHelper.accessor((row) => row.languageIds, {
     header: "Languages",
@@ -52,8 +65,13 @@ export const columns = [
               ]
             : [];
         }) ?? [];
-      return <BadgeCloud items={languages} />;
+      return (
+        <div className="fade-out-bottom h-full">
+          <BadgeCloud items={languages} />
+        </div>
+      );
     },
+    size: 150,
   }),
   columnHelper.accessor((row) => row.tagIds, {
     header: "Tags",
@@ -72,8 +90,13 @@ export const columns = [
               ]
             : [];
         }) ?? [];
-      return <BadgeCloud items={tags} />;
+      return (
+        <div className="fade-out-bottom h-full">
+          <BadgeCloud items={tags} />
+        </div>
+      );
     },
+    size: 200,
   }),
   columnHelper.accessor((row) => row.licenseId, {
     header: "License",
@@ -81,17 +104,20 @@ export const columns = [
       const meta = info.table.options.meta as FilterListsTableMeta;
       const license = meta.licenses.find((l) => l.id === info.getValue());
       return license ? (
-        <BadgeCloud
-          items={[
-            {
-              key: license.id,
-              value: license.name,
-              href: license.url ?? undefined,
-            },
-          ]}
-        />
+        <div className="fade-out-bottom h-full">
+          <BadgeCloud
+            items={[
+              {
+                key: license.id,
+                value: license.name,
+                href: license.url ?? undefined,
+              },
+            ]}
+          />
+        </div>
       ) : null;
     },
+    size: 150,
   }),
   columnHelper.accessor((row) => row.maintainerIds, {
     header: "Maintainers",
@@ -110,7 +136,12 @@ export const columns = [
               ]
             : [];
         }) ?? [];
-      return <BadgeCloud items={maintainers} />;
+      return (
+        <div className="fade-out-bottom h-full">
+          <BadgeCloud items={maintainers} />
+        </div>
+      );
     },
+    size: 200,
   }),
 ];

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

@@ -72,6 +72,7 @@ export function FilterListTable({
   const table = useReactTable({
     data,
     columns,
+    columnResizeMode: "onChange",
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     meta: {
@@ -85,16 +86,33 @@ export function FilterListTable({
 
   return (
     <div className="space-y-2">
-      <Table>
+      <Table
+        style={{
+          width: table.getCenterTotalSize(),
+          tableLayout: "fixed",
+        }}
+      >
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
+                <TableHead
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  style={{ width: header.getSize() }}
+                  className="relative"
+                >
                   {flexRender(
                     header.column.columnDef.header,
                     header.getContext(),
                   )}
+                  <div
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    className={`resizer ${
+                      header.column.getIsResizing() ? "isResizing" : ""
+                    }`}
+                  />
                 </TableHead>
               ))}
             </TableRow>
@@ -102,10 +120,16 @@ export function FilterListTable({
         </TableHeader>
         <TableBody>
           {table.getRowModel().rows.map((row) => (
-            <TableRow key={row.id}>
+            <TableRow key={row.id} className="h-20">
               {row.getVisibleCells().map((cell) => (
-                <TableCell key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                <TableCell
+                  key={cell.id}
+                  style={{ width: cell.column.getSize() }}
+                  className="relative"
+                >
+                  <div className="h-[64px] overflow-hidden">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </div>
                 </TableCell>
               ))}
             </TableRow>