fix(mobile): line up toggles on the right of a choice's settings page

[chhoumann]

On a phone, some toggles on a choice's settings page sat left of the others: on a new Capture, "Create file if it doesn't exist" 16px short of the card's edge, "Task" 28px and "Open" 45px; "Open" on a Template too. They lined up in the builder dialog before #2141.

Inside the settings window, Obsidian's narrow-container rule gives every row that is not mod-toggle a control that grows and starts its content on the left. QuickAdd's toggle rows are Svelte SettingItems without mod-toggle, and the mobile rule that keeps toggle-only rows inline (#1637) set width: auto but not the alignment. Next to a short name the control still grows, so its toggle stayed on the left. The rule now also aligns the control's content to the end, as Obsidian's own toggle rows are.

Phone 390x844, a new Capture (before / after):

Tests

• New choice-builder-pages-phone case: on a new Capture's page in dev:mobile at 390x844, every toggle-only row's toggle ends at the row's content edge. It fails on master ("Create file if it doesn't exist: 16px", "Task: 28px", "Open: 45px").
• pnpm run build-with-lint, pnpm run test (6618 passed) and .agents/run-e2e pass.

Release

CSS only, no migration. Lands before 2.30.0 alongside #2141.

Fixes #2146

Note

Fix mobile settings page to right-align checkbox-only toggle rows

Right-justifies the control container on mobile QuickAdd setting rows whose only control is a checkbox, in styles.css. Other row styles (direction, alignment, width, top margin) stay the same.

• Adds a reusable openChoicePage E2E helper in choice-builder-pages-phone.test.ts that can open and verify any choice's configuration page; the existing macro test now uses it.
• Adds a phone E2E test that checks every checkbox-only row has its toggle within 0.5px of the row's right edge.

^{Macroscope summarized c49645d.}

Summary by CodeRabbit

• Bug Fixes
  • On phone-sized screens, toggle-only controls on choice settings pages now align with the right edge of their card. Their labels and toggles remain on one horizontal line and are vertically aligned. Rows containing a mix of checkboxes and other controls retain their stacked layout.

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-02T19:10:05.527658Z	d1be4ac	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[coderabbitai]

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: c88b750b-13c2-4244-a1b4-734de332cee6

📥 Commits

Reviewing files that changed from the base of the PR and between d1be4ac and c49645d.

📒 Files selected for processing (2)

• src/styles.css
• tests/e2e/choice-builder-pages-phone.test.ts

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

---

📝 Walkthrough

Walkthrough

The mobile checkbox-only control rule now right-aligns its contents. A phone end-to-end test checks toggle alignment on a capture choice settings page.

Changes

Phone Toggle Alignment

Layer / File(s)	Summary
Mobile toggle alignment and coverage src/styles.css, tests/e2e/choice-builder-pages-phone.test.ts	The mobile rule right-aligns checkbox-only controls while mixed-control rows remain stacked. The phone test checks toggle alignment against the card’s padded right edge. Test helpers now accept a supplied choice and wait for its settings page title.

Priority: ➖ Normal

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

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to c4964

The change aligns toggle-only settings rows on phones, with no identified issue requiring resolution before merge.

🚥 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. (1 skipped: 1 …	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: aligning mobile toggles on a choice's settings page.
Linked Issues check	✅ Passed	The PR meets the coding requirements in #2146. src/styles.css keeps toggle-only mobile rows inline, aligns them vertically, and sets the control content to the end. The shared rule applies to the af…
Out of Scope Changes check	✅ Passed	The changes remain within #2146. The CSS change implements the toggle alignment fix. The E2E helper updates support opening arbitrary choices and the new regression test. No unrelated product behavior…

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. (1 skipped: 1 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• 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

_{A rabbit checks the toggles’ place,
Then nudges them to line with grace.
Checkbox rows now end in line,
Mixed rows keep their stacked design.
A capture page confirms the view,
And hops away when checks are through.}

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