Merge branch 'main' of github.com:CS3219-AY2425S1/cs3219-ay2425s1-project-g16 into anun/crud

Author: SeeuSim

Makefile

@@ -1,6 +1,8 @@
 setup:
 	./scripts/install-deps.sh
 	./scripts/ensure-volume.sh
+
+migrate-seed:
 	./scripts/migrate-seed-databases.sh
 
 db-up:

frontend/src/routes/questions/main.tsx

@@ -4,6 +4,7 @@ import { Await, defer, useLoaderData, type LoaderFunctionArgs } from 'react-rout
 
 import { WithNavBanner } from '@/components/blocks/authed/with-nav-banner';
 import { Loading } from '@/components/blocks/loading';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { useCrumbs } from '@/lib/hooks/use-crumbs';
 import { fetchQuestions, ROWS_PER_PAGE } from '@/services/question-service';
 import type { IGetQuestionsResponse } from '@/types/question-types';
@@ -69,12 +70,14 @@ export function Questions() {
 
   return (
     <WithNavBanner crumbs={crumbs}>
-      <div className='container mx-auto py-3'>
-        <Suspense fallback={<Loading />}>
-          <Await resolve={initialData.initialPage}>
-            <QuestionTable columns={columns} data={questions} isError={isError} />
-          </Await>
-        </Suspense>
+      <div className='flex w-full flex-1 overflow-hidden py-3'>
+        <ScrollArea className='size-full px-6'>
+          <Suspense fallback={<Loading />}>
+            <Await resolve={initialData.initialPage}>
+              <QuestionTable columns={columns} data={questions} isError={isError} />
+            </Await>
+          </Suspense>
+        </ScrollArea>
       </div>
     </WithNavBanner>
   );

frontend/src/routes/questions/question-table.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   ColumnDef,
   ColumnFiltersState,
@@ -32,7 +33,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { useState } from 'react';
 
 interface QuestionTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -73,7 +73,7 @@ export function QuestionTable<TData, TValue>({
   };
 
   return (
-    <div>
+    <div className='flex size-full flex-col'>
       <div className='flex items-center py-4'>
         <div className='mr-2'>
           <Select onValueChange={handleStatusFilterChange}>
@@ -107,11 +107,14 @@ export function QuestionTable<TData, TValue>({
           className='max-w-sm'
         />
       </div>
-      <div className='rounded-md border'>
+      <div className='border-border rounded-md border'>
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow
+                className='border-border/60 bg-primary-foreground text-primary'
+                key={headerGroup.id}
+              >
                 {headerGroup.headers.map((header) => {
                   return (
                     <TableHead key={header.id}>
@@ -127,7 +130,7 @@ export function QuestionTable<TData, TValue>({
           <TableBody>
             {!isError && table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id}>
+                <TableRow key={row.id} className='border-border/60 even:bg-secondary/10'>
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}