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) => {