N-FIN-31: add min column width (#38)

Resolves #31

src/app/account/page.tsx

@@ -42,7 +42,7 @@ export default async function AccountPage() {
 
     return (
         <div className="flex flex-col items-center">
-            <Card className="w-full max-w-md mt-12">
+            <Card className="w-full max-w-md md:mt-12">
                 <CardHeader>
                     <CardTitle>Hey, {user?.username}!</CardTitle>
                     <CardDescription>This is your account overview.</CardDescription>
@@ -81,7 +81,7 @@ export default async function AccountPage() {
                         </div>
                     </div>
                 </CardContent>
-                <CardFooter className="space-x-4">
+                <CardFooter className="grid gap-4 grid-cols-1 md:grid-cols-2">
                     {
                         process.env.NODE_ENV === 'development' && (
                             <GenerateSampleDataForm onSubmit={generateSampleData}/>

src/app/categories/columns.tsx

@@ -25,6 +25,7 @@ export const columns = (
                     </svg>
                 );
             },
+            size: 65,
         },
         {
             accessorKey: 'createdAt',

src/app/entities/columns.tsx

@@ -17,6 +17,7 @@ export const columns = (
         {
             accessorKey: 'type',
             header: 'Type',
+            size: 100,
         },
         {
             accessorKey: 'createdAt',

src/app/payments/columns.tsx

@@ -18,6 +18,7 @@ export const columns = (
             cell: ({row}) => {
                 return format(row.original.date, 'PPP');
             },
+            size: 175,
         },
         {
             accessorKey: 'amount',
@@ -28,6 +29,7 @@ export const columns = (
                     currency: 'EUR',
                 }).format(row.getValue('amount') as number / 100);
             },
+            size: 70,
         },
         {
             accessorKey: 'payorId',
@@ -36,6 +38,7 @@ export const columns = (
                 const entity = entities.find((entity) => entity.id === row.original.payorId);
                 return entity?.name ?? '-';
             },
+            size: 200,
         },
         {
             accessorKey: 'payeeId',
@@ -44,6 +47,7 @@ export const columns = (
                 const entity = entities.find((entity) => entity.id === row.original.payeeId);
                 return entity?.name ?? '-';
             },
+            size: 200,
         },
         {
             accessorKey: 'categoryId',
@@ -60,10 +64,12 @@ export const columns = (
                     </div>
                 );
             },
+            size: 200,
         },
         {
             accessorKey: 'note',
             header: 'Note',
+            size: 200,
         },
         {
             id: 'actions',

src/components/paymentPageClientComponents.tsx

@@ -100,20 +100,6 @@ export default function PaymentPageClientContent({
         );
     };
 
-    const entitiesMapped = entities?.map((entity) => {
-        return {
-            label: entity.name,
-            value: entity.id,
-        };
-    }) ?? [];
-
-    const categoriesMapped = categories?.map((category) => {
-        return {
-            label: category.name,
-            value: category.id,
-        };
-    }) ?? [];
-
     return (
         <div className={className}>
             <div className="flex items-center justify-between w-full">

src/components/ui/data-table.tsx

@@ -45,7 +45,8 @@ export function DataTable<TData, TValue>({
                             <TableRow key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => {
                                     return (
-                                        <TableHead key={header.id}>
+                                        <TableHead key={header.id}
+                                                   style={{minWidth: `${header.column.getSize()}px`}}>
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(