🎨 Improve descriptions and component position for replenished workbook (#1726)

Author: KATO-Hiro

src/lib/components/WorkBooks/WorkBookList.svelte

@@ -103,27 +103,21 @@
 <!-- TODO: 「ユーザ作成」の問題集には、検索機能を追加 -->
 {#if workbookType === WorkBookType.CURRICULUM}
   <div class="mb-6">
-    <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
-      <div class="flex items-center space-x-4">
-        <ButtonGroup>
-          {#each AVAILABLE_GRADES as grade}
-            <Button
-              onclick={() => filterByGradeMode(grade)}
-              class={selectedGrade === grade ? 'text-primary-700' : 'text-gray-900'}
-            >
-              {getTaskGradeLabel(grade)}
-            </Button>
-          {/each}
-        </ButtonGroup>
-
-        <TooltipWrapper
-          tooltipContent="問題集のグレードを指定します（最頻値。2つ以上ある場合は、最も易しいグレードに掲載）"
-        />
-      </div>
-
-      <div class="mt-4 md:mt-0">
-        <Toggle bind:checked={isShowReplenishment}>「補充」があれば表示</Toggle>
-      </div>
+    <div class="flex items-center space-x-4">
+      <ButtonGroup>
+        {#each AVAILABLE_GRADES as grade}
+          <Button
+            onclick={() => filterByGradeMode(grade)}
+            class={selectedGrade === grade ? 'text-primary-700' : 'text-gray-900'}
+          >
+            {getTaskGradeLabel(grade)}
+          </Button>
+        {/each}
+      </ButtonGroup>
+
+      <TooltipWrapper
+        tooltipContent="問題集のグレードを指定します（最頻値。2つ以上ある場合は、最も易しいグレードに掲載）"
+      />
     </div>
   </div>
 {/if}
@@ -144,31 +138,40 @@
     />
   </div>
 
-  <!-- カリキュラムの場合、かつ、公開されている【補充】問題集があるときだけ表示 -->
-  {#if workbookType === WorkBookType.CURRICULUM && readableReplenishedWorkbooksCount() && isShowReplenishment}
+  <!-- カリキュラム、かつ、公開されている【補充】問題集があるときのみ -->
+  {#if workbookType === WorkBookType.CURRICULUM && readableReplenishedWorkbooksCount()}
     <div class="mt-12">
-      <div class="flex items-center space-x-3 pb-4">
-        <div class="text-2xl dark:text-white">補充</div>
-
-        <LabelWithTooltips
-          labelName=""
-          tooltipId="tooltip-for-replenished-workbooks"
-          tooltipContents={[
-            '（任意）',
-            '特定の課題を持つ人向けの問題集です。',
-            '苦手意識があれば、挑戦してみましょう。',
-          ]}
-        />
+      <!-- 見出しと説明文、表示の切り替え用ボタンを常に表示 -->
+      <div class="flex flex-col md:flex-row items-start md:items-center md:space-x-6">
+        <div class="flex items-center space-x-1 pb-0 md:pb-4">
+          <div class="text-2xl dark:text-white">補充</div>
+
+          <LabelWithTooltips
+            labelName=""
+            tooltipId="tooltip-for-replenished-workbooks"
+            tooltipContents={[
+              '（任意）',
+              '特定の課題（数学的素養や実装力など）を持つ人向けの問題集です。',
+              '苦手意識があれば、挑戦してみましょう。',
+            ]}
+          />
+        </div>
+
+        <div class="mt-4 md:mt-0 pb-4">
+          <Toggle bind:checked={isShowReplenishment}>表示</Toggle>
+        </div>
       </div>
 
-      <WorkBookBaseTable
-        {workbookType}
-        workbooks={replenishedWorkbooks}
-        {workbookGradeModes}
-        {userId}
-        {role}
-        taskResults={taskResultsWithWorkBookId}
-      />
+      {#if isShowReplenishment}
+        <WorkBookBaseTable
+          {workbookType}
+          workbooks={replenishedWorkbooks}
+          {workbookGradeModes}
+          {userId}
+          {role}
+          taskResults={taskResultsWithWorkBookId}
+        />
+      {/if}
     </div>
   {/if}
 {:else}