fix(gui): keep native login confirmation readable and contained

[pengusto]

Summary

The native-login confirmation inherits a horizontal flex layout from the shared warning notice. German copy and a home path collapse into narrow columns, while the confirm button overflows the panel.

• Render this confirmation as a block; allow its actions and button text to wrap within the panel.
• Add a rendered CSS-cascade regression using the actual view and shared stylesheet. Existing consent, disabled-state, focus and mutation behavior stay unchanged.

Addresses the layout portion of #6387. Account-switch workflow changes remain outside this PR.

Verification

• cd gui && bun test tests: 2704 passed, 0 failed across 309 files, including the new regression and existing native-profile/session tests.
• New regression against the original component: failed as expected (display: flex); with the fix: passed.
• cd gui && bun run lint: passed.
• cd gui && bun run build: passed; existing large-chunk warning remains.
• bun run typecheck: passed.
• git diff --check: passed.
• Real Chrome/154.0.8037.58 browser geometry check with the built production CSS and static markup from the actual React view: 16 cases passed (German, light/dark, widths 320/375/760/1440, CSS zoom 100%/110%, long home path). Verified stacked contents, readable heading width, and contained buttons without horizontal overflow. Isolated fixture only; no live account switch or proxy mutation.

The repository-wide backend suite was not run: this four-line styling change does not change backend logic, and the complete GUI suite plus root typecheck cover the affected surface. Remaining repository-wide coverage is left to CI; fork CI may require maintainer approval.

Anonymized fixture screenshots at 1440px / 110%, using the same production stylesheet. These images live on the fork's separate pr-assets branch, not in the PR diff.

Before:

After:

Checklist

• Scope stays focused and avoids unrelated cleanup.
• Docs or release notes were updated when needed. No copy, workflow, or configuration changes; no documentation update needed.
• Security-sensitive changes were reviewed for secrets, auth, and unsafe defaults. Presentation only; no credential, API, or account-switch behavior changes.

Review readiness checklist

• Required local validation passed; commands, results, and any full-suite exception are documented.

• I pushed my PR to a recent dev commit (at most 10 behind; a maintainer may still ask for the exact tip before merge).

• I resolved all correct Codex and CodeRabbit findings.

• My PR is ready for review.

Summary by CodeRabbit

• Bug Fixes
  • Improved the confirmation notice layout so long text and button labels wrap within the available space, including for long paths and translated text.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

🧰 Additional context used

📚 Code guidelines (1)

gui/AGENTS.md — auto-discovered

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: lidge-jun/opencodex/.coderabbit.yaml

Review profile: ASSERTIVE

Plan: Advanced

Run ID: 7b2f080a-6402-4008-9efe-4175b747048d

📥 Commits

Reviewing files that changed from the base of the PR and between a6114b6 and 0a2a389.

📒 Files selected for processing (2)

• gui/src/components/native-main-profiles-view.tsx
• gui/tests/native-main-confirmation-layout.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The confirmation panel now displays as a block. Its action row and buttons wrap long text and remain constrained to the container width. A new rendering test checks these layout properties and confirms the primary button remains disabled.

Changes

Confirmation panel layout

Layer / File(s)	Summary
Confirmation layout and validation gui/src/components/native-main-profiles-view.tsx, gui/tests/native-main-confirmation-layout.test.tsx	At native-main-profiles-view.tsx:122, 134–136, the confirmation panel uses block display, and its action row and buttons wrap text within the container width. The new test renders the panel with a long home path and checks the layout and disabled primary button.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 0a2a3

The change is limited to confirmation-panel layout, with no concrete regression established. Proceed with normal CI checks; the reported browser geometry check was not independently rerun here.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 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: keeping the native login confirmation readable and contained through layout and text-wrapping fixes.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.
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

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

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

[github-actions]

✅ Deterministic PR hygiene checks passed.

[github-actions]

✅ READY

• all PR quality gates passed; the review readiness checklist is complete.

Review readiness checklist

• ✅ Required local validation passed; commands, results, and any full-suite exception are documented.
• ✅ I pushed my PR to a recent dev commit (at most 10 behind; a maintainer may still ask for the exact tip before merge).
• ✅ I resolved all correct Codex and CodeRabbit findings.
• ✅ My PR is ready for review.

✅ 4/4 boxes ticked.

This pull request is already Ready for Review.
The review-ready label marks this PR as ready; review automation runs independently.
Maintainers: @lidge-jun @Ingwannu

[lidge-jun]

Maintainer integration record (MAINTAINERS.md, dev-only)

• Decision: integrate fix(gui): keep native login confirmation readable and contained #6388 into dev for the next release without a second maintainer approval, as the project owner authorized on 2026-10-01.
• Exact head: 0a2a38942f2b99a60e525ba126e248233aee1e8a. Base a6114b62ed. It is 13 commits behind the current dev, and git merge-tree --write-tree is clean.
• Hosted CI at this head: the fork workflows needed maintainer approval, which was given. Cross-platform CI run 36860428159 succeeded. These jobs ran and passed: test 1/4 to test 4/4 (the GUI suite runs inside them), gates (typecheck, GUI lint and privacy), storage policy, api usage, docker smoke, keyring ubuntu, keyring windows, npm-global ubuntu-latest, npm-global windows-latest and ci. React Doctor run 36860428176 succeeded, and hygiene and enforce-target passed.
• Local suites: not run, by explicit owner instruction. The author reports the full GUI suite (2704 pass), GUI lint and build, typecheck, and a real Chrome geometry check across 16 cases.
• Security review: not required. The change is presentation-only inline layout styles plus one test, and it does not touch credentials, the API, or account-switch behavior.
• Findings: CodeRabbit raised no actionable comments, and there are no open maintainer reviews.
• Scope note: this fixes the layout portion of [Bug]: Native account-switch confirmation layout breaks in German; switching workflow is hard to follow #6387, where the German confirmation collapses and overflows. The issue's second point, that the switching workflow is hard to follow, is not addressed, so [Bug]: Native account-switch confirmation layout breaks in German; switching workflow is hard to follow #6387 should stay open after merge with a comment, or be retitled.
• Attribution: authored by @pengusto, squash-merged as is.