From b8e278664c1fa6d0656aec973d8dbd2063b1da48 Mon Sep 17 00:00:00 2001
From: Woojin Jung <44637040+jwoojin9@users.noreply.github.com>
Date: Sun, 13 Oct 2024 00:02:53 +0900
Subject: [PATCH] fix(fe): prevent submission detail modal overflow (#2157)

* fix(fe): prevent submission detail modal overflow

* chore(fe): increase modal width
---
 .../@tabs/submission/_components/Columns.tsx  |  2 +-
 .../_components/SubmissionDetailAdmin.tsx     | 22 ++++++++++++-------
 .../_components/SubmissionColumns.tsx         |  2 +-
 apps/frontend/components/DataTableAdmin.tsx   |  2 +-
 4 files changed, 17 insertions(+), 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
index dc2a4a2ef4..4d41230892 100644
--- 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
index 7a154849bc..343753bb1e 100644
--- 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
index e11763049a..8fc1c6cae3 100644
--- 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
index 1ce9b8ed7a..7141b6c708 100644
--- 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>