🎨 Fix column order and styles (#1304)

Author: KATO-Hiro

src/lib/components/GradeLabel.svelte

@@ -9,7 +9,11 @@
 </script>
 
 <div class="rounded-lg border-2 border-white">
-  <div class="p-1 w-10 text-center rounded-md {toWhiteTextIfNeeds(grade)} {gradeColor}">
+  <div
+    class="p-1 w-8 xs:w-10 text-sm xs:text-md text-center rounded-md {toWhiteTextIfNeeds(
+      grade,
+    )} {gradeColor}"
+  >
     {#if taskGrade !== TaskGrade.PENDING}
       {grade}
     {:else}

src/lib/components/SubmissionStatus/SubmissionStatusImage.svelte

@@ -17,10 +17,11 @@
   }
 </script>
 
-<Img src={imagePath} alt={imageAlt} class="h-8 w-8" />
+<Img src={imagePath} alt={imageAlt} class="h-7 xs:h-8 w-7 xs:w-8" />
+
 {#if isLoggedIn}
   <div class="flex flex-col items-center ml-2 md:ml-4 text-xs">
-    <div class="mb-1 dark:text-gray-300">
+    <div class="pb-1 dark:text-gray-300">
       {'更新'}
     </div>
     <ChevronDownOutline class="w-3 h-3 text-primary-600 dark:text-gray-300 inline" />

src/routes/workbooks/[slug]/+page.svelte

@@ -141,10 +141,11 @@
   {#if workBookTasks.length}
     <div class="overflow-auto rounded-md border">
       <Table shadow class="text-md">
-        <TableHead class="text-sm bg-gray-100">
-          <TableHeadCell class="min-w-[96px] max-w-[120px]">回答</TableHeadCell>
-          <TableHeadCell class="text-center px-0">グレード</TableHeadCell>
-          <TableHeadCell class="min-w-[240px] max-w-2/3 truncate">問題名</TableHeadCell>
+        <TableHead class="text-xs xs:text-sm bg-gray-100">
+          <TableHeadCell class="text-center w-14 px-0.5 xs:px-0">グレード</TableHeadCell>
+          <TableHeadCell class="text-center min-w-[96px] max-w-[120px]">回答</TableHeadCell>
+          <TableHeadCell class="min-w-[240px] max-w-2/3 truncate px-0 sm:px-6">問題名</TableHeadCell
+          >
           <TableHeadCell class="min-w-[120px] max-w-[150px] truncate">出典</TableHeadCell>
           <TableHeadCell class="text-center px-0">一言</TableHeadCell>
         </TableHead>
@@ -154,9 +155,16 @@
               key={getUniqueIdUsing(workBookTask.taskId)}
               class={getBackgroundColorFrom(getTaskResult(workBookTask.taskId).status_name)}
             >
+              <!-- 問題のグレード -->
+              <TableBodyCell class="justify-center w-14 px-3">
+                <div class="flex items-center justify-center min-w-[54px] max-w-[54px]">
+                  <GradeLabel taskGrade={getTaskGrade(workBookTask.taskId)} />
+                </div>
+              </TableBodyCell>
+
               <!-- 回答状況の更新 -->
               <TableBodyCell
-                class="justify-center w-20 px-0.5 sm:px-3"
+                class="justify-center w-20 px-0"
                 on:click={() => handleClick(workBookTask.taskId)}
               >
                 <div class="flex items-center justify-center min-w-[80px] max-w-[80px]">
@@ -167,15 +175,8 @@
                 </div>
               </TableBodyCell>
 
-              <!-- 問題のグレード -->
-              <TableBodyCell class="justify-center w-14 px-0">
-                <div class="flex items-center justify-center min-w-[54px] max-w-[54px]">
-                  <GradeLabel taskGrade={getTaskGrade(workBookTask.taskId)} />
-                </div>
-              </TableBodyCell>
-
               <!-- 問題のリンク -->
-              <TableBodyCell>
+              <TableBodyCell class="px-0 sm:px-6">
                 <div class="xs:text-lg truncate">
                   <ExternalLinkWrapper
                     url={taskUrl(getContestIdFrom(workBookTask.taskId), workBookTask.taskId)}