fix(gui): close logs detail dialog on outside click

[Wibias]

Summary

• Add backdrop dismiss to the logs Details dialog so clicking outside the modal closes it
• Use the same modal-backdrop-dismiss pattern as other native dialog modals in the GUI

Test plan

• Open Logs, click Details on a log entry
• Click outside the dialog and confirm it closes
• Confirm Escape and the X button still close the dialog
• Confirm clicks inside the dialog do not dismiss it

Summary by CodeRabbit

• Bug Fixes
  • Improved log detail dialogs so clicking inside the dialog no longer unintentionally dismisses it.
  • Added a backdrop-dismiss option for easier dialog closure.
  • Improved keyboard navigation by excluding the backdrop-dismiss button from the tab order.

[github-actions]

⚠️ Deterministic hygiene checks failed.

• missing_regression_test — Behavior changed under src/ or gui/src/ without a test change. Add focused coverage or obtain test-exception-approved.

[github-actions]

✅ READY

• all PR quality gates passed.

UI screenshot waived by the gui-screenshot-waived label.

Hygiene

✅ Deterministic PR hygiene checks passed.

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 25 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

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: ASSERTIVE

Plan: Pro Plus

Run ID: 94300c32-d3c7-4631-b8d9-f3dfd68110c4

📥 Commits

Reviewing files that changed from the base of the PR and between 4afc556 and c2df07b.

📒 Files selected for processing (1)

• gui/tests/logs-auto-refresh.test.tsx

📝 Walkthrough

Walkthrough

The log detail dialog now supports backdrop dismissal through an accessible button. Clicks inside the dialog card no longer trigger backdrop dismissal. Tests verify the button, its tab index, and dialog removal.

Changes

Log dialog interaction

Layer / File(s)	Summary
Dialog dismissal handling gui/src/pages/Logs.tsx, gui/tests/logs-auto-refresh.test.tsx	Adds an accessible backdrop-dismiss button, stops clicks inside the dialog card from propagating, and verifies dismissal behavior with an automated test.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• lidge-jun/opencodex#442: Modifies the same log dialog and test area for auto-refresh behavior.

Suggested reviewers: ingwannu, lidge-jun

🚥 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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: closing the Logs detail dialog when the user clicks outside it.
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/logs-detail-click-outside

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@gui/tests/logs-auto-refresh.test.tsx`:
- Around line 466-475: Update the dialog test around detailBtn and backdrop to
first query and click the .log-detail-card element, then assert the dialog
remains present before clicking .modal-backdrop-dismiss. Preserve the existing
backdrop-click assertion that the dialog closes, ensuring the test covers both
inside-card non-dismissal and backdrop dismissal.

🪄 Autofix

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: ASSERTIVE

Plan: Pro Plus

Run ID: ffdc229b-d264-4869-a958-3db341e72f0a

📥 Commits

Reviewing files that changed from the base of the PR and between 9fec217 and 4afc556.

📒 Files selected for processing (1)

• gui/tests/logs-auto-refresh.test.tsx

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Test the inside-card non-dismissal path.

This test clicks the backdrop-dismiss button, but it does not click .log-detail-card. A regression that removes event.stopPropagation() in gui/src/pages/Logs.tsx Lines 858-895 would still pass. Because the PR contract requires clicks inside the dialog to keep it open, click the card and assert that the dialog remains before clicking the backdrop.

Proposed test addition

   expect(container.querySelector("dialog")).not.toBeNull();

+  const dialogCard = container.querySelector<HTMLDivElement>(".log-detail-card")!;
+  await act(async () => { dialogCard.click(); });
+  expect(container.querySelector("dialog")).not.toBeNull();
+
   const backdrop = container.querySelector<HTMLButtonElement>(".modal-backdrop-dismiss")!;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	const detailBtn = container.querySelector<HTMLButtonElement>(".log-detail-btn")!;
	await act(async () => { detailBtn.click(); });
	expect(container.querySelector("dialog")).not.toBeNull();
	const backdrop = container.querySelector<HTMLButtonElement>(".modal-backdrop-dismiss")!;
	expect(backdrop).not.toBeNull();
	expect(backdrop.tabIndex).toBe(-1);
	await act(async () => { backdrop.click(); });
	expect(container.querySelector("dialog")).toBeNull();
	const detailBtn = container.querySelector<HTMLButtonElement>(".log-detail-btn")!;
	await act(async () => { detailBtn.click(); });
	expect(container.querySelector("dialog")).not.toBeNull();
	const dialogCard = container.querySelector<HTMLDivElement>(".log-detail-card")!;
	await act(async () => { dialogCard.click(); });
	expect(container.querySelector("dialog")).not.toBeNull();
	const backdrop = container.querySelector<HTMLButtonElement>(".modal-backdrop-dismiss")!;
	expect(backdrop).not.toBeNull();
	expect(backdrop.tabIndex).toBe(-1);
	await act(async () => { backdrop.click(); });
	expect(container.querySelector("dialog")).toBeNull();

🤖 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 `@gui/tests/logs-auto-refresh.test.tsx` around lines 466 - 475, Update the
dialog test around detailBtn and backdrop to first query and click the
.log-detail-card element, then assert the dialog remains present before clicking
.modal-backdrop-dismiss. Preserve the existing backdrop-click assertion that the
dialog closes, ensuring the test covers both inside-card non-dismissal and
backdrop dismissal.