fix: fixed the table of vulndb for mobile

src/components/vulnerability-database/vulnerability-data-table/columns.tsx

@@ -17,33 +17,36 @@ export const columns: ColumnDef<Vulnerability>[] = [
     {
         accessorKey: 'cve',
         header: 'ID',
-        size: 150,
+        size: 200,
         cell: ({ row }) => (
             <Link href={`/vulnerability-database/${row.getValue('cve')}`}>
-                <div className="w-32">{row.getValue('cve')}</div>
+                {row.getValue('cve')}
             </Link>
         ),
     },
     {
         accessorKey: 'description',
         header: 'Description',
         size: 600,
+        meta: {
+            className: 'hidden md:table-cell'
+        },
         cell: ({ row }) => {
             const description = row.getValue('description') as string
             const truncated =
                 description?.length > 100
                     ? description.substring(0, 100) + '...'
                     : description
-            return <div className="w-108">{truncated}</div>
+            return <span>{truncated}</span>
         },
     },
     {
         accessorKey: 'cvss',
-        size: 100,
+        size: 90,
         header: ({ column }) => {
             return (
                 <div
-                    className="flex cursor-pointer items-center hover:text-accent-foreground"
+                    className="flex cursor-pointer items-center hover:text-white/70"
                     onClick={() =>
                         column.toggleSorting(column.getIsSorted() === 'asc')
                     }
@@ -53,15 +56,18 @@ export const columns: ColumnDef<Vulnerability>[] = [
                 </div>
             )
         },
-        cell: ({ row }) => <div className="w-20">{row.getValue('cvss')}</div>,
+        cell: ({ row }) => <span>{row.getValue('cvss')}</span>,
     },
     {
         accessorKey: 'datePublished',
         size: 150,
+        meta: {
+            className: 'hidden md:table-cell'
+        },
         header: ({ column }) => {
             return (
                 <div
-                    className="flex cursor-pointer items-center hover:text-accent-foreground"
+                    className="flex cursor-pointer items-center hover:text-white/70"
                     onClick={() =>
                         column.toggleSorting(column.getIsSorted() === 'asc')
                     }
@@ -82,7 +88,7 @@ export const columns: ColumnDef<Vulnerability>[] = [
                     ? formatDistanceToNow(date, { addSuffix: true })
                     : format(date, 'd. MMM yy')
 
-            return <div className="w-32">{formatted}</div>
+            return <span>{formatted}</span>
         },
     },
 ]

src/components/vulnerability-database/vulnerability-data-table/data-table.tsx

@@ -23,6 +23,7 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table'
+import { cn } from '@/lib/utils'
 
 const PAGE_SIZE = 10
 
@@ -66,13 +67,17 @@ export function DataTable<TData, TValue>({
     return (
         <div>
             <div className="overflow-hidden rounded-md border">
-                <Table>
+                <Table className="table-fixed">
                     <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => {
                                     return (
-                                        <TableHead key={header.id}>
+                                        <TableHead
+                                            key={header.id}
+                                            className={cn(header.column.columnDef.meta?.className)}
+                                            style={{ width: header.column.columnDef.size }}
+                                        >
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
@@ -95,7 +100,10 @@ export function DataTable<TData, TValue>({
                                         {columns.map((column, cellIndex) => (
                                             <TableCell
                                                 key={`skeleton-cell-${cellIndex}`}
-                                                className="h-[75px] overflow-hidden"
+                                                className={cn(
+                                                    'h-[30px] md:h-[75px] overflow-hidden',
+                                                    column.meta?.className,
+                                                )}
                                                 style={{ width: column.size }}
                                             >
                                                 <Skeleton className="h-4 w-full" />
@@ -126,7 +134,11 @@ export function DataTable<TData, TValue>({
                                     {row.getVisibleCells().map((cell) => (
                                         <TableCell
                                             key={cell.id}
-                                            className="h-[75px] overflow-hidden"
+                                            className={cn(
+                                                "h-[30px] md:h-[75px] overflow-hidden",
+                                                cell.column.columnDef.meta?.className
+                                            )}
+                                            style={{ width: cell.column.columnDef.size }}
                                         >
                                             {flexRender(
                                                 cell.column.columnDef.cell,

src/types/tanstack-table.d.ts

@@ -0,0 +1,7 @@
+import '@tanstack/react-table'
+
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        className?: string
+    }
+}