fix(fe): prevent submission detail modal overflow (#2157)

* fix(fe): prevent submission detail modal overflow * chore(fe): increase modal width
skkuding · Oct 12, 2024 · b8e2786 · b8e2786
1 parent 6c840ae
commit b8e2786
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/submission/_components/Columns.tsx b/apps/frontend/app/admin/contest/[id]/(overall)/@tabs/submission/_components/Columns.tsx
@@ -51,7 +51,7 @@ export const columns: ColumnDef<OverallSubmission>[] = [
       <div
         className={cn(
           'whitespace-nowrap text-center text-xs',
-          row.getValue('result') === 'Accept'
+          row.getValue('result') === 'Accepted'
             ? 'text-green-500'
             : row.getValue('result') === 'Judging'
               ? 'text-gray-500'

diff --git a/apps/frontend/app/admin/contest/[id]/_components/SubmissionDetailAdmin.tsx b/apps/frontend/app/admin/contest/[id]/_components/SubmissionDetailAdmin.tsx
@@ -27,9 +27,9 @@ export default function SubmissionDetailAdmin({
   })
   const submission = data?.getSubmission
   return (
-    <ScrollArea className="mt-5 w-[580px]">
+    <ScrollArea className="mt-5 max-h-[540px] w-[760px]">
       {!loading && (
-        <div className="ml-20 flex w-[432px] flex-col gap-4">
+        <div className="ml-20 flex w-[612px] flex-col gap-4">
           <h1 className="flex text-lg font-semibold">
             <span className="max-w-[30%] truncate text-gray-400">
               {submission?.user?.userProfile?.realName}(
@@ -80,20 +80,26 @@ export default function SubmissionDetailAdmin({
           </ScrollArea>
           {submission?.testcaseResult.length !== 0 && (
             <div>
-              <h2 className="font-bold">Test case</h2>
-              <Table className="[&_*]:text-center [&_*]:text-sm [&_*]:hover:bg-transparent [&_td]:p-2 [&_tr]:border-slate-600">
+              <h2 className="font-bold">Testcase</h2>
+              <Table className="[&_*]:text-center [&_*]:text-xs [&_*]:hover:bg-transparent [&_td]:p-2 [&_tr]:!border-neutral-200">
                 <TableHeader>
                   <TableRow>
                     <TableHead></TableHead>
-                    <TableHead className="text-black">Result</TableHead>
-                    <TableHead className="text-black">Runtime</TableHead>
-                    <TableHead className="text-black">Memory</TableHead>
+                    <TableHead className="!text-sm text-black">
+                      Result
+                    </TableHead>
+                    <TableHead className="!text-sm text-black">
+                      Runtime
+                    </TableHead>
+                    <TableHead className="!text-sm text-black">
+                      Memory
+                    </TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody className="text-slate-400">
                   {submission?.testcaseResult.map((item) => (
                     <TableRow key={item.id}>
-                      <TableCell>{item.id}</TableCell>
+                      <TableCell className="!py-4">{item.id}</TableCell>
                       <TableCell
                         className={
                           item.result === 'Accepted'

diff --git a/apps/frontend/app/admin/contest/[id]/participant/[userId]/_components/SubmissionColumns.tsx b/apps/frontend/app/admin/contest/[id]/participant/[userId]/_components/SubmissionColumns.tsx
@@ -23,7 +23,7 @@ export const submissionColumns: ColumnDef<UserSubmission>[] = [
       <div
         className={cn(
           'whitespace-nowrap text-center text-xs',
-          row.getValue('submissionResult') === 'Accept'
+          row.getValue('submissionResult') === 'Accepted'
             ? 'text-green-500'
             : row.getValue('submissionResult') === 'Judging'
               ? 'text-gray-500'

diff --git a/apps/frontend/components/DataTableAdmin.tsx b/apps/frontend/components/DataTableAdmin.tsx
@@ -557,7 +557,7 @@ export function DataTableAdmin<TData, TValue>({
           setIsSubmissionDialogOpen(false)
         }}
       >
-        <DialogContent className="max-h-[620px] max-w-[620px] justify-center">
+        <DialogContent className="max-h-[620px] max-w-[800px] justify-center">
           <SubmissionDetailAdmin submissionId={submissionId} />
         </DialogContent>
       </Dialog>