From 401b5881f975a0e792b7253366f51f84798eb9e6 Mon Sep 17 00:00:00 2001
From: nakaterm <104970808+nakaterm@users.noreply.github.com>
Date: Tue, 8 Sep 2026 19:55:51 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=82=AB=E3=83=AC=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=E4=B8=8A=E3=81=AE=E3=83=9C=E3=82=BF=E3=83=B3=E8=A1=8C?=
 =?UTF-8?q?=E3=82=92=E6=95=B4=E7=90=86=E3=81=97=E3=81=A6=E7=B8=A6=E5=B9=85?=
 =?UTF-8?q?=E3=82=92=E7=A2=BA=E4=BF=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

view モードでカレンダーの上に「カレンダー追加」と「最多人数」の2行が
積まれており、特にモバイルでカレンダーの縦幅を圧迫していた。
どちらも既存の行に寄せて、専用の行をなくした。

- カレンダー追加: タイトル行の右端（編集の隣）へ。モバイルではアイコンのみ。
- 最多人数 / ゲストハイライト: 「参加者 (N人)」の行の右端へ。
- ゲストのハイライト中は最多人数と並べて名前チップを表示する
  （状態は従来どおり排他）。ラベルは名前のみに簡略化。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018uHfmYqhSEy9RUQTN2euEn
---
 client/src/components/AddToCalendar.tsx |  12 ++-
 client/src/pages/eventId/Submission.tsx | 104 +++++++++++++-----------
 2 files changed, 66 insertions(+), 50 deletions(-)

diff --git a/client/src/components/AddToCalendar.tsx b/client/src/components/AddToCalendar.tsx
index fd827e2..03ca72c 100644
--- a/client/src/components/AddToCalendar.tsx
+++ b/client/src/components/AddToCalendar.tsx
@@ -17,6 +17,7 @@ type Props = {
 /**
  * 自分の提出済み日程をカレンダーアプリに追加するボタン。
  * その場で ics を生成してダウンロードさせ、各カレンダーアプリのインポート機能で読み込んでもらう。
+ * カレンダーの縦幅を圧迫しないよう、タイトル行に並べて置く想定（モバイルではアイコンのみ）。
  */
 export function AddToCalendar({
   projectName,
@@ -54,10 +55,15 @@ export function AddToCalendar({
   };
 
   return (
-    <div className="mt-2 flex items-center gap-1">
-      <button type="button" onClick={handleClick} className="btn btn-sm btn-outline gap-1.5">
+    <div className="flex shrink-0 items-center gap-1">
+      <button
+        type="button"
+        onClick={handleClick}
+        aria-label="カレンダー追加"
+        className="btn btn-sm btn-outline gap-1.5"
+      >
         <LuCalendarPlus className="h-4 w-4" />
-        <span>カレンダー追加 (β)</span>
+        <span className="hidden sm:inline">カレンダー追加 (β)</span>
       </button>
       <button
         type="button"
diff --git a/client/src/pages/eventId/Submission.tsx b/client/src/pages/eventId/Submission.tsx
index 6893e5b..c78f267 100644
--- a/client/src/pages/eventId/Submission.tsx
+++ b/client/src/pages/eventId/Submission.tsx
@@ -315,12 +315,25 @@ export default function SubmissionPage() {
               <div>
                 <div className="flex items-center justify-between gap-2">
                   <h1 className="min-w-0 truncate font-bold text-base text-base-content sm:text-lg">{project.name}</h1>
-                  {isHost && (
-                    <NavLink to={`/e/${projectId}/edit`} className="btn btn-sm btn-outline shrink-0 gap-1.5">
-                      <LuSettings2 className="h-4 w-4" />
-                      <span>編集</span>
-                    </NavLink>
-                  )}
+                  <div className="flex shrink-0 items-center gap-1.5">
+                    {/* 自分の日程をカレンダーアプリに追加 */}
+                    {mode === "view" && meAsGuest && meAsGuest.slots.length > 0 && (
+                      <AddToCalendar
+                        projectName={project.name}
+                        projectId={projectId ?? ""}
+                        projectDescription={project.description}
+                        slots={meAsGuest.slots}
+                        participationOptionIdToLabel={participationOptionIdToLabel}
+                        participationOptionCount={project.participationOptions.length}
+                      />
+                    )}
+                    {isHost && (
+                      <NavLink to={`/e/${projectId}/edit`} className="btn btn-sm btn-outline shrink-0 gap-1.5">
+                        <LuSettings2 className="h-4 w-4" />
+                        <span>編集</span>
+                      </NavLink>
+                    )}
+                  </div>
                 </div>
                 {project.description &&
                   (() => {
@@ -354,18 +367,6 @@ export default function SubmissionPage() {
                   })()}
               </div>
 
-              {/* 自分の日程をカレンダーアプリに追加 */}
-              {mode === "view" && meAsGuest && meAsGuest.slots.length > 0 && (
-                <AddToCalendar
-                  projectName={project.name}
-                  projectId={projectId ?? ""}
-                  projectDescription={project.description}
-                  slots={meAsGuest.slots}
-                  participationOptionIdToLabel={participationOptionIdToLabel}
-                  participationOptionCount={project.participationOptions.length}
-                />
-              )}
-
               {/* 参加形態選択ボタン */}
               {mode === "edit" && project.participationOptions.length > 1 && selectedParticipationOptionId !== null && (
                 <div className="mt-3 mb-2 flex flex-wrap items-center gap-1.5">
@@ -402,27 +403,6 @@ export default function SubmissionPage() {
                 </div>
               )}
 
-              {/* ハイライト操作バー */}
-              {mode === "view" && project.guests.length > 0 && (
-                <div className="mt-3 mb-2 flex flex-wrap items-center gap-1.5">
-                  <button
-                    type="button"
-                    className={`btn btn-sm gap-1.5 ${highlight?.type === "maxCount" ? "btn-primary" : "btn-outline"}`}
-                    onClick={() => setHighlight((prev) => (prev?.type === "maxCount" ? null : { type: "maxCount" }))}
-                  >
-                    <LuUsers className="h-4 w-4" />
-                    最多人数
-                  </button>
-                  {highlight?.type === "guest" && (
-                    <button type="button" className="btn btn-sm btn-primary gap-1.5" onClick={() => setHighlight(null)}>
-                      <LuUser className="h-4 w-4" />
-                      {guestIdToName[highlight.guestId] ?? "参加者"}さんの日程
-                      <LuX className="h-4 w-4" />
-                    </button>
-                  )}
-                </div>
-              )}
-
               <Calendar
                 startDate={project.startDate}
                 endDate={project.endDate}
@@ -441,14 +421,44 @@ export default function SubmissionPage() {
               {/* 参加者一覧 */}
               {project.guests.length > 0 && (
                 <div className="mt-1 pb-2">
-                  <button
-                    type="button"
-                    onClick={() => setGuestListExpanded((prev) => !prev)}
-                    className="flex items-center gap-1.5 font-medium text-base-content/80 text-sm hover:text-base-content"
-                  >
-                    参加者 ({project.guests.length}人)
-                    {guestListExpanded ? <LuChevronUp className="h-4 w-4" /> : <LuChevronDown className="h-4 w-4" />}
-                  </button>
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      onClick={() => setGuestListExpanded((prev) => !prev)}
+                      className="flex min-w-0 items-center gap-1.5 font-medium text-base-content/80 text-sm hover:text-base-content"
+                    >
+                      参加者 ({project.guests.length}人)
+                      {guestListExpanded ? <LuChevronUp className="h-4 w-4" /> : <LuChevronDown className="h-4 w-4" />}
+                    </button>
+                    {/* ハイライト操作（カレンダーの縦幅を使わないようこの行に置く） */}
+                    {mode === "view" && (
+                      <div className="flex min-w-0 items-center gap-1.5">
+                        {highlight?.type === "guest" && (
+                          <button
+                            type="button"
+                            className="btn btn-sm btn-primary min-w-0 gap-1.5"
+                            onClick={() => setHighlight(null)}
+                          >
+                            <LuUser className="h-4 w-4 shrink-0" />
+                            <span className="truncate">{guestIdToName[highlight.guestId] ?? "参加者"}</span>
+                            <LuX className="h-4 w-4 shrink-0" />
+                          </button>
+                        )}
+                        <button
+                          type="button"
+                          className={`btn btn-sm shrink-0 gap-1.5 ${
+                            highlight?.type === "maxCount" ? "btn-primary" : "btn-outline"
+                          }`}
+                          onClick={() =>
+                            setHighlight((prev) => (prev?.type === "maxCount" ? null : { type: "maxCount" }))
+                          }
+                        >
+                          <LuUsers className="h-4 w-4" />
+                          最多人数
+                        </button>
+                      </div>
+                    )}
+                  </div>
                   {guestListExpanded && (
                     <ul className="mt-1 divide-y divide-base-200">
                       {project.guests.map((guest) => {