🎨 Align progress bars (#1901)

Author: KATO-Hiro

src/lib/components/SubmissionStatus/AcceptedCounter.svelte

@@ -21,10 +21,9 @@
   });
 </script>
 
-<!-- FIXME: 横幅を微調整する -->
 <!-- See: -->
 <!-- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed -->
-<div class="text-xs xs:text-sm w-max-[72px] w-max-[96px] text-center">
+<div class="text-xs md:text-sm w-min-[72px] w-max-[96px] text-center">
   <div>
     {acceptedCount} / {allTaskCount}
   </div>

src/lib/components/TaskList.svelte

@@ -33,7 +33,6 @@
 
   let { grade, taskResults, isAdmin, isLoggedIn }: Props = $props();
 
-  // TODO: 他のコンポーネントでも利用できるようにする。
   let updatingModal: UpdatingModal | null = null;
 
   function openModal(taskResult: TaskResult): void {
@@ -48,17 +47,24 @@
 <Accordion flush>
   <AccordionItem>
     {#snippet header()}
-      <span class="flex justify-around w-full place-items-center">
-        <GradeLabel
-          taskGrade={grade}
-          defaultPadding={0.25}
-          defaultWidth={12}
-          reducedWidth={9}
-          defaultTextSize="xl"
-        />
+      <span class="grid grid-cols-[1fr_6fr_0fr] sm:grid-cols-[1fr_6fr_1fr] w-full items-center">
+        <div class="flex justify-center">
+          <GradeLabel
+            taskGrade={grade}
+            defaultPadding={0.25}
+            defaultWidth={12}
+            reducedWidth={9}
+            defaultTextSize="xl"
+          />
+        </div>
 
-        <ThermometerProgressBar {taskResults} />
-        <AcceptedCounter {taskResults} />
+        <div class="flex justify-center">
+          <ThermometerProgressBar {taskResults} width="w-5/6 md:w-11/12 lg:w-full" />
+        </div>
+
+        <div class="hidden sm:flex justify-center">
+          <AcceptedCounter {taskResults} />
+        </div>
       </span>
     {/snippet}