bug/question-list-darkmode: Add style fix and scroll container

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/routes/questions/main.tsx

@@ -10,6 +10,7 @@ import type { IGetQuestionsResponse } from '@/types/question-types';
 
 import { QuestionTable } from './question-table';
 import { columns } from './table-columns';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 const getListQuestionsQueryConfig = (pageNumber?: number) =>
   queryOptions({
@@ -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

@@ -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())}