Skip to content

アプリ全体の余白を狭め、ボタンの配置を変更 - #183

Merged
koguchi-e merged 22 commits into
mainfrom
fix/layout-width
Aug 3, 2026
Merged

アプリ全体の余白を狭め、ボタンの配置を変更#183
koguchi-e merged 22 commits into
mainfrom
fix/layout-width

Conversation

@koguchi-e

@koguchi-e koguchi-e commented Jul 31, 2026

Copy link
Copy Markdown
Owner

Issue

概要

446日目の進捗会より、デザインをモダンにするため余白を少なくするようにする。

Summary by CodeRabbit

新機能

  • タスク生成完了時に、成功通知が画面へ自動表示されるようになりました。
  • タスク生成中に自動更新され、完了後にタスク一覧へ切り替わるようになりました。
  • タスク作成・編集フォームで、複数行入力に対応しました。
  • タスク未作成時の空状態画面を追加しました。
  • 状況入力画面に進捗表示や注意事項を追加しました。

改善

  • カード、ボタン、ヘッダー、フッターのデザインとレスポンシブ表示を改善しました。
  • 通知やレビュー画面のアクセシビリティを向上しました。
  • 完了画面や履歴一覧のレイアウト・操作性を改善しました。

文言変更

  • 利用規約・プライバシーポリシーの表記を更新しました。

@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@koguchi-e, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 24 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: ffcd1b97-86aa-4bfd-a7a5-393b34cdc638

📥 Commits

Reviewing files that changed from the base of the PR and between 2813297 and 32402c7.

⛔ Files ignored due to path filters (1)
  • app/assets/images/top_logo.png is excluded by !**/*.png
📒 Files selected for processing (21)
  • app/javascript/controllers/task_generation_controller.js
  • app/jobs/generate_tasks_job.rb
  • app/views/home/index.html.erb
  • app/views/kaminari/_first_page.html.erb
  • app/views/kaminari/_last_page.html.erb
  • app/views/kaminari/_next_page.html.erb
  • app/views/kaminari/_prev_page.html.erb
  • app/views/layouts/application.html.erb
  • app/views/positions/edit.html.erb
  • app/views/shared/_flash.html.erb
  • app/views/shared/_header_menu.html.erb
  • app/views/situations/_review_modal.html.erb
  • app/views/situations/completions/show.html.erb
  • app/views/situations/index.html.erb
  • app/views/situations/show.html.erb
  • app/views/tasks/_code_block.html.erb
  • app/views/tasks/_create_form.html.erb
  • app/views/tasks/_generating.html.erb
  • app/views/tasks/_list.html.erb
  • config/locales/ja.yml
  • spec/system/task_generation_spec.rb
📝 Walkthrough

Walkthrough

タスク生成完了時のTurbo Stream通知と状態更新を追加しました。タスク生成中の画面にポーリングを追加しました。タスク操作画面、状況画面、共通レイアウト、ホーム画面の表示を更新しました。法的文書の表記を統一しました。

Changes

通知とタスク生成完了フロー

Layer / File(s) Summary
タスク生成完了通知と状態更新
app/jobs/generate_tasks_job.rb, app/javascript/controllers/task_generation_controller.js, app/views/tasks/_generating.html.erb, app/views/layouts/application.html.erb, app/views/shared/_flash.html.erb, app/javascript/controllers/flash_controller.js, spec/jobs/generate_tasks_job_spec.rb, spec/system/task_generation_spec.rb
タスク生成後の状態画面更新をトランザクション外で実行します。成功通知をflash_messagesへTurbo Streamで配信します。生成中画面は一定間隔でTurbo遷移します。共有フラッシュ表示と関連テストを追加します。

タスク操作画面

Layer / File(s) Summary
タスク作成と編集画面
app/views/tasks/index.html.erb, app/views/tasks/_create_form.html.erb, app/views/tasks/_list.html.erb, app/views/tasks/_code_block.html.erb
空状態、作成フォーム、編集欄、コードブロック、操作ボタン、次画面へのリンクを更新します。入力欄を複数行テキストエリアへ変更します。

状況入力と確認画面

Layer / File(s) Summary
状況入力と確認画面
app/views/situations/new.html.erb, app/views/situations/show.html.erb, app/views/situations/completions/show.html.erb, app/views/situations/index.html.erb, app/views/situations/_review_modal.html.erb, app/views/positions/edit.html.erb
3段階の入力フォーム、確認内容、完了画面、履歴カード、レビュー用モーダル、タスク並べ替え画面の配置とスタイルを更新します。

共通レイアウトと法的文書

Layer / File(s) Summary
共通レイアウトとサイト構成
app/assets/tailwind/application.css, app/views/layouts/application.html.erb, app/views/shared/_header_menu.html.erb, app/views/shared/_footer.html.erb, app/views/home/index.html.erb
テーマ色、ヘッダー、メニュー、フッター、main領域、ホーム画面の表示と幅を更新します。ログイン状態に応じた表示を追加します。
規約とポリシー表示
app/views/terms/show.html.erb, app/views/privacy/show.html.erb
利用規約とプライバシーポリシーの句読点を統一します。利用規約の管理主体の呼称を「管理者」へ変更します。

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant GenerateTasksJob
  participant TurboStreamsChannel
  participant TaskGenerationController
  participant ApplicationLayout
  participant SharedFlash
  GenerateTasksJob->>TurboStreamsChannel: 生成完了状態と成功通知を配信
  TaskGenerationController->>TaskGenerationController: 一定間隔後にTurbo replace遷移
  TurboStreamsChannel->>ApplicationLayout: flash_messagesへ通知を追加
  ApplicationLayout->>SharedFlash: 共有フラッシュを描画
Loading

Possibly related PRs

  • koguchi-e/ReNovo#107: flash_controller.jsとフラッシュ通知表示を変更しており、今回の通知処理と関連します。
  • koguchi-e/ReNovo#140: GenerateTasksJobを変更しており、今回の完了通知追加と関連します。
  • koguchi-e/ReNovo#142: GenerateTasksJob、タスク画面、Turbo更新を変更しており、今回の実装と関連します。
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.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 タイトルは、余白の縮小とボタン配置の変更という主な変更内容を簡潔に示しています。
Description check ✅ Passed Issueと概要を記載していますが、日報とスクリーンショットの項目は未記載です。主要情報は含まれるため要件を満たします。
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/layout-width

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

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/jobs/generate_tasks_job.rb`:
- Around line 46-51: Update the task-generation flow around situation.completed!
so task creation and completion remain inside a transaction, but move the
Turbo::StreamsChannel.broadcast_append_to success notification to execute only
after that transaction commits successfully. Preserve the existing success
message and failure handling.

In `@app/views/shared/_flash.html.erb`:
- Around line 2-6: Update app/views/shared/_flash.html.erb lines 2-6 to remove
absolute positioning, top-20, right-20, and fixed width from each flash message,
replacing the width with w-full. Update app/views/layouts/application.html.erb
lines 43-46 so the flash_messages container is a fixed vertical flex container
with gap and w-[min(300px,calc(100vw-2rem))], allowing messages to stack without
overlap and fit narrow screens.

In `@app/views/situations/new.html.erb`:
- Around line 121-124: In the explanatory paragraph within the new situation
view, update the Japanese typo “なりたか” to “なりたいか” while leaving the surrounding
wording unchanged.

In `@app/views/tasks/_create_form.html.erb`:
- Around line 14-20: Update the submit button in the task creation form with
aria-label="タスクを作成" and the cancel button with aria-label="作成をキャンセル"; add
aria-hidden="true" to each button’s i icon so screen readers announce only the
accessible action names.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 1b5e2dd6-2769-4b09-aa7b-dc052a4a03fd

📥 Commits

Reviewing files that changed from the base of the PR and between b255326 and 368af56.

📒 Files selected for processing (17)
  • app/jobs/generate_tasks_job.rb
  • app/views/layouts/application.html.erb
  • app/views/positions/edit.html.erb
  • app/views/shared/_flash.html.erb
  • app/views/shared/_footer.html.erb
  • app/views/shared/_header_menu.html.erb
  • app/views/situations/_review_modal.html.erb
  • app/views/situations/completions/show.html.erb
  • app/views/situations/index.html.erb
  • app/views/situations/new.html.erb
  • app/views/situations/show.html.erb
  • app/views/tasks/_code_block.html.erb
  • app/views/tasks/_create_form.html.erb
  • app/views/tasks/_list.html.erb
  • app/views/tasks/index.html.erb
  • app/views/terms/show.html.erb
  • spec/jobs/generate_tasks_job_spec.rb

Comment thread app/jobs/generate_tasks_job.rb
Comment thread app/views/shared/_flash.html.erb Outdated
Comment thread app/views/situations/new.html.erb Outdated
Comment thread app/views/tasks/_create_form.html.erb

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
app/views/situations/index.html.erb (2)

9-10: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

カードリンクに明示的なフォーカス表示を追加してください。

link_to がフォーカス可能ですが、現在の状態表現は hover: のみです。キーボード操作時にカード全体の現在位置を確認できない可能性があります。link_toblockfocus-visible:ring-* または focus-visible:outline-* を追加してください。

修正例
-    <%= link_to situation_path(situation.id) do %>
+    <%= link_to situation_path(situation.id),
+      class: "block rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-calm-blue focus-visible:ring-offset-2" do %>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/views/situations/index.html.erb` around lines 9 - 10,
カード全体のリンクをキーボード操作でも識別できるよう、situations のカードを生成する link_to に block と focus-visible
のリングまたはアウトライン用クラスを追加してください。既存の hover 表現とカードのレイアウトは維持してください。

10-10: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

余白削減の方針とカードの余白値を合わせてください。

m-5sm:p-8 はカードの外側と内側の余白を広げます。特に sm:p-8 は画面幅が広い場合に2remの内側余白になります。余白を狭める目的なら、承認済みデザイン値まで m-*p-* を下げてください。

PR objectivesの「アプリ全体の余白を狭める」という目的に基づく指摘です。

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/views/situations/index.html.erb` at line 10,
カード要素の余白クラスを、承認済みデザイン値に合わせて縮小してください。特に外側余白のm-5と、広い画面で内側余白を2remにするsm:p-8を適切な低いm-*/p-*値へ更新し、カードの他のスタイルは維持してください。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@app/views/situations/index.html.erb`:
- Around line 9-10: カード全体のリンクをキーボード操作でも識別できるよう、situations のカードを生成する link_to に
block と focus-visible のリングまたはアウトライン用クラスを追加してください。既存の hover
表現とカードのレイアウトは維持してください。
- Line 10:
カード要素の余白クラスを、承認済みデザイン値に合わせて縮小してください。特に外側余白のm-5と、広い画面で内側余白を2remにするsm:p-8を適切な低いm-*/p-*値へ更新し、カードの他のスタイルは維持してください。

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: be70420f-bac4-420e-962b-efe588ac828b

📥 Commits

Reviewing files that changed from the base of the PR and between 6f58a15 and a3c6a34.

⛔ Files ignored due to path filters (1)
  • app/assets/images/top_logo.png is excluded by !**/*.png
📒 Files selected for processing (10)
  • app/assets/tailwind/application.css
  • app/views/home/index.html.erb
  • app/views/layouts/application.html.erb
  • app/views/positions/edit.html.erb
  • app/views/shared/_footer.html.erb
  • app/views/shared/_header_menu.html.erb
  • app/views/situations/index.html.erb
  • app/views/situations/new.html.erb
  • app/views/situations/show.html.erb
  • app/views/tasks/_list.html.erb
🚧 Files skipped from review as they are similar to previous changes (7)
  • app/views/situations/show.html.erb
  • app/views/tasks/_list.html.erb
  • app/views/positions/edit.html.erb
  • app/views/shared/_header_menu.html.erb
  • app/views/shared/_footer.html.erb
  • app/views/situations/new.html.erb
  • app/views/layouts/application.html.erb

@koguchi-e

Copy link
Copy Markdown
Owner Author

@coderabbitai full review

@coderabbitai

coderabbitai Bot commented Aug 2, 2026

Copy link
Copy Markdown
✅ Action performed

Full review finished.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
spec/jobs/generate_tasks_job_spec.rb (1)

20-25: 🗄️ Data Integrity & Integration | 🔵 Trivial | ⚡ Quick win

通知のコミット境界をテストで固定してください。

この expectation は引数だけを検証します。通知が ActiveRecord::Base.transaction のコミット前に実行されてもテストは成功します。

ロールバック時に broadcast_append_to が呼ばれないことと、成功時にコミット後に呼ばれることを検証するテストを追加してください。RSpec の外側のトランザクションが実際のコミット境界を隠していないことも確認してください。

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@spec/jobs/generate_tasks_job_spec.rb` around lines 20 - 25, Update the
generate task job specs around the Turbo::StreamsChannel.broadcast_append_to
expectation to verify transaction timing: assert no broadcast occurs when the
ActiveRecord::Base.transaction rolls back, and assert the broadcast occurs only
after a successful commit. Ensure the spec setup does not wrap the example in an
outer transaction that masks the real commit boundary.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/jobs/generate_tasks_job.rb`:
- Around line 42-54: Update the post-completion notification flow in the job
method containing situation.completed! so exceptions from the
Turbo::StreamsChannel broadcasts do not invoke situation&.failed!. Keep the
committed situation in its completed state, and handle notification retries or
failure logging after completed! without rolling back the successful status.
- Around line 49-54: Update the GenerateTasksJob completion flow and the
situation tasks page so completion notifications are not lost before
turbo_stream_from `@situation` subscribes; add a completion-state recheck,
polling, or persisted notification, and add a system test that reproduces job
completion before subscription and verifies the user still receives the
completion result.

In `@app/views/layouts/application.html.erb`:
- Around line 23-25: Update the image_tag alt text within the root_path link to
clearly identify the destination and brand, such as “ReNovo ホーム,” replacing the
current “メニューロゴ” value while leaving the surrounding link unchanged.

---

Nitpick comments:
In `@spec/jobs/generate_tasks_job_spec.rb`:
- Around line 20-25: Update the generate task job specs around the
Turbo::StreamsChannel.broadcast_append_to expectation to verify transaction
timing: assert no broadcast occurs when the ActiveRecord::Base.transaction rolls
back, and assert the broadcast occurs only after a successful commit. Ensure the
spec setup does not wrap the example in an outer transaction that masks the real
commit boundary.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e6f51b31-3f98-4a40-97df-754e2dd0027e

📥 Commits

Reviewing files that changed from the base of the PR and between b255326 and 2813297.

⛔ Files ignored due to path filters (1)
  • app/assets/images/top_logo.png is excluded by !**/*.png
📒 Files selected for processing (21)
  • app/assets/tailwind/application.css
  • app/javascript/controllers/flash_controller.js
  • app/jobs/generate_tasks_job.rb
  • app/views/home/index.html.erb
  • app/views/layouts/application.html.erb
  • app/views/positions/edit.html.erb
  • app/views/privacy/show.html.erb
  • app/views/shared/_flash.html.erb
  • app/views/shared/_footer.html.erb
  • app/views/shared/_header_menu.html.erb
  • app/views/situations/_review_modal.html.erb
  • app/views/situations/completions/show.html.erb
  • app/views/situations/index.html.erb
  • app/views/situations/new.html.erb
  • app/views/situations/show.html.erb
  • app/views/tasks/_code_block.html.erb
  • app/views/tasks/_create_form.html.erb
  • app/views/tasks/_list.html.erb
  • app/views/tasks/index.html.erb
  • app/views/terms/show.html.erb
  • spec/jobs/generate_tasks_job_spec.rb

Comment thread app/jobs/generate_tasks_job.rb Outdated
Comment thread app/jobs/generate_tasks_job.rb Outdated
Comment thread app/views/layouts/application.html.erb

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/javascript/controllers/task_generation_controller.js`:
- Around line 9-12: Update connect() so a failed Turbo.visit schedules another
identical visit after this.intervalValue, preserving the current replace action.
Do not use the retry timer for successful visits, and rely on the existing Turbo
visit behavior because the installed Turbo version provides no success/failure
events.

In `@app/views/home/index.html.erb`:
- Line 16: 装飾用のプラスアイコンである<i class="fa-solid
fa-plus"></i>にaria-hidden="true"を追加し、「新しくふりかえる」リンクの可読名から支援技術に不要な情報を除外してください。Googleアイコンと同じ属性設定に揃えてください。

In `@spec/system/task_generation_spec.rb`:
- Around line 17-25: Increase the have_content wait timeout in the task
generation system spec from 5 to 10 seconds after situation.completed!, so the
assertion accommodates task_generation_controller.js refreshing after its
connection delay.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: b8edadd0-0094-4604-921a-1d20aac1ec40

📥 Commits

Reviewing files that changed from the base of the PR and between 2813297 and 1c4c3dc.

⛔ Files ignored due to path filters (1)
  • app/assets/images/top_logo.png is excluded by !**/*.png
📒 Files selected for processing (7)
  • app/javascript/controllers/task_generation_controller.js
  • app/jobs/generate_tasks_job.rb
  • app/views/home/index.html.erb
  • app/views/layouts/application.html.erb
  • app/views/shared/_flash.html.erb
  • app/views/tasks/_generating.html.erb
  • spec/system/task_generation_spec.rb
🚧 Files skipped from review as they are similar to previous changes (3)
  • app/views/shared/_flash.html.erb
  • app/views/layouts/application.html.erb
  • app/jobs/generate_tasks_job.rb

Comment thread app/javascript/controllers/task_generation_controller.js
Comment thread app/views/home/index.html.erb Outdated
Comment thread spec/system/task_generation_spec.rb Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant