From 8d50fe95f6cf6fc701ea019176887d0995907eef Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Sun, 2 Nov 2025 12:24:29 +0000
Subject: [PATCH 1/4] chore(ui): Make button group responsive in task table
 (#2781)

---
 .../make-button-group-responsive/plan.md      | 61 +++++++++++++++++++
 .../components/TaskTables/TaskTable.svelte    | 30 +++++----
 2 files changed, 78 insertions(+), 13 deletions(-)
 create mode 100644 docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md

diff --git a/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
new file mode 100644
index 000000000..5f0aaf9fb
--- /dev/null
+++ b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
@@ -0,0 +1,61 @@
+# Button Group のレスポンシブ化
+
+## 問題
+
+640px未満の画面でボタングループの文字が縦に潰れてしまう
+
+## 解決方法
+
+Tailwind CSSのレスポンシブクラスを使用してボタンの折り返しと配置を実装
+
+## コード変更
+
+### 修正前
+
+```svelte
+<ButtonGroup class="m-4 contents-center">
+```
+
+### 修正後
+
+```svelte
+<div class="flex justify-center m-4">
+  <ButtonGroup class="flex flex-wrap justify-start gap-1">
+    {#each Object.entries(contestTableProviderGroups) as [type, config]}
+      <Button
+        onclick={() => updateActiveContestType(type as ContestTableProviderGroups)}
+        class={`rounded-lg ${activeContestType === (type as ContestTableProviderGroups)
+          ? 'active-button-class text-primary-700 dark:!text-primary-500'
+          : ''}`}
+        aria-label={config.getMetadata().ariaLabel}
+      >
+        {config.getMetadata().buttonLabel}
+      </Button>
+    {/each}
+  </ButtonGroup>
+</div>
+```
+
+## 使用クラス一覧
+
+| クラス           | 役割                                        |
+| ---------------- | ------------------------------------------- |
+| `flex`           | Flexboxコンテナを有効化                     |
+| `flex-wrap`      | 画面幅に応じてボタンを折り返す              |
+| `justify-center` | ボタングループ全体を水平中央揃え（外側div） |
+| `justify-start`  | ボタン自体を左寄せ（ButtonGroup内）         |
+| `gap-1`          | ボタン間のスペーシング（0.25rem）           |
+| `rounded`        | ボタンの角に丸みを付与                      |
+
+## 参考資料
+
+- [Tailwind CSS - Flex Wrap](https://tailwindcss.com/docs/flex-wrap)
+- [Tailwind CSS - Justify Content](https://tailwindcss.com/docs/justify-content)
+- [Tailwind CSS - Gap](https://tailwindcss.com/docs/gap)
+- [Tailwind CSS - Border Radius](https://tailwindcss.com/docs/border-radius)
+
+## 使用ライブラリ
+
+- Tailwind CSS
+- Flowbite
+- svelte-5-ui-lib
diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index 0bd75c523..a85c771cc 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -171,19 +171,23 @@
 
 <!-- See: -->
 <!-- https://flowbite-svelte.com/docs/components/button-group -->
-<ButtonGroup class="m-4 contents-center">
-  {#each Object.entries(contestTableProviderGroups) as [type, config]}
-    <Button
-      onclick={() => updateActiveContestType(type as ContestTableProviderGroups)}
-      class={activeContestType === (type as ContestTableProviderGroups)
-        ? 'active-button-class text-primary-700 dark:!text-primary-500'
-        : ''}
-      aria-label={config.getMetadata().ariaLabel}
-    >
-      {config.getMetadata().buttonLabel}
-    </Button>
-  {/each}
-</ButtonGroup>
+<div class="flex justify-center m-4">
+  <ButtonGroup class="flex flex-wrap justify-start gap-1">
+    {#each Object.entries(contestTableProviderGroups) as [type, config]}
+      <Button
+        onclick={() => updateActiveContestType(type as ContestTableProviderGroups)}
+        class={`rounded-lg ${
+          activeContestType === (type as ContestTableProviderGroups)
+            ? 'active-button-class text-primary-700 dark:!text-primary-500'
+            : ''
+        }`}
+        aria-label={config.getMetadata().ariaLabel}
+      >
+        {config.getMetadata().buttonLabel}
+      </Button>
+    {/each}
+  </ButtonGroup>
+</div>
 
 <!-- TODO: ページネーションを実装 -->
 <!-- See: -->

From 98f275685cbf5bce13e6900f14fa6ee2197ae68e Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Sun, 2 Nov 2025 12:34:17 +0000
Subject: [PATCH 2/4] chore(ui): Hide shadow in button group (#2781)

---
 .../2025-11-02/make-button-group-responsive/plan.md   | 11 +++++++++--
 src/lib/components/TaskTables/TaskTable.svelte        |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
index 5f0aaf9fb..0e937d1e9 100644
--- a/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
+++ b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
@@ -20,7 +20,7 @@ Tailwind CSSのレスポンシブクラスを使用してボタンの折り返
 
 ```svelte
 <div class="flex justify-center m-4">
-  <ButtonGroup class="flex flex-wrap justify-start gap-1">
+  <ButtonGroup class="flex flex-wrap justify-start gap-1 shadow-none">
     {#each Object.entries(contestTableProviderGroups) as [type, config]}
       <Button
         onclick={() => updateActiveContestType(type as ContestTableProviderGroups)}
@@ -45,7 +45,13 @@ Tailwind CSSのレスポンシブクラスを使用してボタンの折り返
 | `justify-center` | ボタングループ全体を水平中央揃え（外側div） |
 | `justify-start`  | ボタン自体を左寄せ（ButtonGroup内）         |
 | `gap-1`          | ボタン間のスペーシング（0.25rem）           |
-| `rounded`        | ボタンの角に丸みを付与                      |
+| `rounded-lg`     | ボタンの角に丸みを付与                      |
+| `border-b-0`     | 下部ボーダーラインを削除                    |
+| `shadow-none`    | デフォルトシャドウを削除                    |
+
+## 注記
+
+`ButtonGroup`コンポーネントのデフォルトスタイルに、下部ボーダーラインとシャドウが含まれているため、`border-b-0`と`shadow-none`クラスを追加してそれらを打ち消す必要があります。
 
 ## 参考資料
 
@@ -53,6 +59,7 @@ Tailwind CSSのレスポンシブクラスを使用してボタンの折り返
 - [Tailwind CSS - Justify Content](https://tailwindcss.com/docs/justify-content)
 - [Tailwind CSS - Gap](https://tailwindcss.com/docs/gap)
 - [Tailwind CSS - Border Radius](https://tailwindcss.com/docs/border-radius)
+- [Tailwind CSS - Box Shadow](https://tailwindcss.com/docs/box-shadow)
 
 ## 使用ライブラリ
 
diff --git a/src/lib/components/TaskTables/TaskTable.svelte b/src/lib/components/TaskTables/TaskTable.svelte
index a85c771cc..a26bfa4e2 100644
--- a/src/lib/components/TaskTables/TaskTable.svelte
+++ b/src/lib/components/TaskTables/TaskTable.svelte
@@ -172,7 +172,7 @@
 <!-- See: -->
 <!-- https://flowbite-svelte.com/docs/components/button-group -->
 <div class="flex justify-center m-4">
-  <ButtonGroup class="flex flex-wrap justify-start gap-1">
+  <ButtonGroup class="flex flex-wrap justify-start gap-1 shadow-none">
     {#each Object.entries(contestTableProviderGroups) as [type, config]}
       <Button
         onclick={() => updateActiveContestType(type as ContestTableProviderGroups)}

From 0d1a6e98798c94dcd2c5869b80226a15a5808654 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Sun, 2 Nov 2025 12:36:37 +0000
Subject: [PATCH 3/4] chore(ui): Fix typo (#2781)

---
 docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
index 0e937d1e9..a50ae3613 100644
--- a/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
+++ b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
@@ -46,7 +46,6 @@ Tailwind CSSのレスポンシブクラスを使用してボタンの折り返
 | `justify-start`  | ボタン自体を左寄せ（ButtonGroup内）         |
 | `gap-1`          | ボタン間のスペーシング（0.25rem）           |
 | `rounded-lg`     | ボタンの角に丸みを付与                      |
-| `border-b-0`     | 下部ボーダーラインを削除                    |
 | `shadow-none`    | デフォルトシャドウを削除                    |
 
 ## 注記

From 2c1e1f77323cbdf679bcb639ba238f213d59a210 Mon Sep 17 00:00:00 2001
From: Kato Hiroki <k.hiro1818@gmail.com>
Date: Sun, 2 Nov 2025 12:53:18 +0000
Subject: [PATCH 4/4] chore(ui): Fix typo (#2781)

---
 docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
index a50ae3613..ffb0f4842 100644
--- a/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
+++ b/docs/dev-notes/2025-11-02/make-button-group-responsive/plan.md
@@ -50,7 +50,7 @@ Tailwind CSSのレスポンシブクラスを使用してボタンの折り返
 
 ## 注記
 
-`ButtonGroup`コンポーネントのデフォルトスタイルに、下部ボーダーラインとシャドウが含まれているため、`border-b-0`と`shadow-none`クラスを追加してそれらを打ち消す必要があります。
+`ButtonGroup`コンポーネントのデフォルトスタイルにシャドウが含まれているため、`shadow-none`クラスを追加してそれらを打ち消す必要があります。
 
 ## 参考資料