あの日の一冊モーダルの位置ずれとスクロール制御を修正

[Rasukarusan]

Motivation

• Framer Motion のアニメーションにより既存の Tailwind -translate-y-1/2 が上書きされてモーダルが中央からずれて表示される問題を解消するため。
• モバイルや本が多い場合にモーダルが画面外に収まりきらず利用性が下がる問題を改善するため。

Description

• apps/web/src/features/index/components/OnThisDay.tsx を修正し、アニメーション対象の要素を全画面のフレックスコンテナ内にラップして中央配置するよう変更しました。
• モーダルに max-h-[calc(100dvh-2rem)] と overflow-y-auto を追加して、表示領域に収まらない場合はモーダル内部でスクロールするようにしました。
• 表示中は背景ページのスクロールを抑止するために toggleNoScrollBody(open) を呼ぶ useEffect を追加し、クリーンアップで確実に解除するようにしました（@/utils/element の利用）。
• モーダルのラップ要素に pointer-events の調整を入れてオーバーレイとコンテンツのクリック挙動を明確化し、閉じるボタンへ明示的に type="button" を追加しました。

Testing

• 実行した自動化チェックとして pnpm install --frozen-lockfile が成功しました。
• pnpm --filter web exec prettier --write src/features/index/components/OnThisDay.tsx を実行してフォーマットを適用しました（成功）。
• pnpm --filter web lint を実行しエラーなしで完了しましたが既存のファイルに対する警告が6件報告されました（警告のみ）。
• pnpm --filter web check-types（tsc --noEmit）が成功しました。
• pnpm --filter web prisma:generate と pnpm --filter web exec playwright install chromium / playwright install-deps chromium は実行し依存のインストールは完了しましたが、試験的に行ったヘッドレスでのスクリーンショット取得は環境（Playwright のネイティブライブラリ依存や開発サーバーの Prisma 初期化タイミング）により保存に失敗しました。

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
kidoku	Ready	Preview	Aug 11, 2026 2:59am