fix(desktop): TODO/Schedule ダイアログ横幅を !important で確実に広げる (再対応 #238)

[MocA-Love]

概要

Issue #238 は PR #242 でクラスを sm:max-w-xl / sm:max-w-5xl に差し替えたが、ユーザー報告によるとビルド後も依然として狭いままだった（sm:max-w-lg 相当の 512px）。

原因の仮説

packages/ui の DialogContent の base className には sm:max-w-lg が入っている。twMerge は理屈上これを剥がせるはずなのに、ビルド済み CSS のルール順で sm:max-w-5xl が sm:max-w-lg より 前 に配置されるため、@media の specificity 引き分けが発生した場合に lg が勝ってしまう余地がある。

実際、リポジトリの他の広幅ダイアログ（DockerView / DatabasesView / TeardownLogsDialog）は揃って !max-w-... の important パターンを採用している。

変更点

ダイアログ	before	after
TodoModal	max-w-xl sm:max-w-xl rounded-xl	!max-w-[min(640px,calc(100vw-2rem))] sm:!max-w-[min(640px,calc(100vw-2rem))] rounded-xl
ScheduleEditorDialog	max-w-5xl sm:max-w-5xl w-[92vw] ...	!w-[min(1280px,92vw)] !max-w-[min(1280px,92vw)] sm:!max-w-[min(1280px,92vw)] max-h-[90vh] overflow-y-auto

• ! (important) でベースの sm:max-w-lg を確実に勝ち切る
• min(固定幅, vw) で画面が狭い時はビューポート基準で縮む
• sm:!max-w-... も併記して @media 由来の順序問題を完全に排除

Test plan

• Desktop アプリを起動
• Agent Manager で「新しい TODO」ダイアログ → 640px 幅で表示されること
• 「新しいスケジュール」ダイアログ → 92vw（最大 1280px）で表示されること
• ウィンドウ幅を狭めた時に min() で画面内に収まること
• 既存の他ダイアログに影響していないこと（横幅を変えていないので影響なし）

Closes #238

Summary by CodeRabbit

• 改善
  • スケジュール編集ダイアログとタスクモーダルが、さまざまな画面サイズに対して最適に表示されるようにレイアウトが調整されました。

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Repo admins can enable using credits for code reviews in their settings.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d09457e0-84c5-4a91-8a27-fdf7a04dc498

📥 Commits

Reviewing files that changed from the base of the PR and between 3c5dcf7 and 446412a.

📒 Files selected for processing (2)

• apps/desktop/src/renderer/features/todo-agent/TodoManager/SchedulesSection/components/ScheduleEditorDialog/ScheduleEditorDialog.tsx
• apps/desktop/src/renderer/features/todo-agent/TodoModal/TodoModal.tsx

---

📝 Walkthrough

ウォークスルー

2つのダイアログコンポーネントのスタイリングを更新しました。固定幅制約である max-w-5xl / max-w-xl から、レスポンシブな最小幅計算 !w-[min(1280px,92vw)] / !max-w-[min(640px,calc(100vw-2rem))] に置き換えることで、各ビューポートサイズでダイアログが適切な幅で表示されるようになります。

変更内容

コホート / ファイル	概要
ダイアログ幅の修正 apps/desktop/src/renderer/features/todo-agent/TodoManager/SchedulesSection/components/ScheduleEditorDialog/ScheduleEditorDialog.tsx, apps/desktop/src/renderer/features/todo-agent/TodoModal/TodoModal.tsx	DialogContent のスタイリングを更新。固定幅クラス（max-w-5xl、max-w-xl）から、ビューポート相対の制約付き最大幅（!w-[min(1280px,92vw)]、!max-w-[min(640px,calc(100vw-2rem))]）に変更。レスポンシブブレークポイント（sm:）にも対応し、ダイアログが干渉することなく適切な幅で表示されるようになります。

推定コードレビュー工数

🎯 1 (Trivial) | ⏱️ ~3 分

うさぎからのお詩

🐰 ダイアログよ、広くなれ
ビューポートに合わせて、しなやかに
最小幅で、おしゃれに整列
min()の魔法で、すべてが調和する ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	プルリクエストのタイトルは、Tailwind の !important を使用して TODO/スケジュールダイアログの横幅問題を修正する内容を正確に反映しており、Issue #238 への再対応であることも明記されている。
Description check	✅ Passed	プルリクエストの説明では、問題の原因仮説、変更内容、テストプランが詳細に記載されており、テンプレートの必須項目（概要、関連 Issue、変更点）を網羅している。
Linked Issues check	✅ Passed	Issue #238 で報告されたダイアログ横幅の問題に対し、本 PR は !important を使用した Tailwind クラスの適用と min() 関数による応答性対応により、ビルド済み CSS のルール順による上書き失敗を解決している。
Out of Scope Changes check	✅ Passed	変更は TodoModal と ScheduleEditorDialog の 2 ファイルに限定され、いずれも Issue #238 で指摘された横幅問題の修正のみに焦点を当てており、範囲外の変更は認められない。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/238-dialog-width-reopen

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}