fix(ui): multi-select footer gap and phone layouts of the New choice menu and Macro builder by chhoumann · Pull Request #2131 · chhoumann/quickadd

chhoumann · 2026-10-01T15:48:46Z

Three small layout fixes from the round-8 sweep, one commit each. All three are also in 2.29.0.

1. Multi-select picker footer (1280x800). Without the "Add a custom value" row, the footer's top rule sat flush on the list's bottom border (0px; 8px with the custom row), so the list's rounded corners rested on a straight line. The 8px gap now belongs to the list, so it's there whichever row follows. The checkbox prompt uses its own button row and is unchanged (12px).

Before	After

Crops of 1280x800 frames (before, after).

2. Macro builder rows on phones (390x844). Obsidian makes every input and button in a phone modal's setting row width: 100%, so each input and its Add button split the row and the placeholders were cut mid-word ("Obsidian comma", "Select comman", "Start typing scrip"). Buttons in these rows now take their own width and the input takes the rest (inputs 239 to 265px, Add 49px, Browse 75px). Scoped to rows holding the command-sequence input, so it also covers the Conditional branch editor, which uses the same rows.

Before	After	After, dark

3. New choice menu on phones (390x844). A phone's menu rows are one ellipsized line, about 300px wide, and each "Type, description" title was 377 to 480px, so all three were cut mid-word. On phones the menu now names just the type; desktop keeps the descriptions.

Before	After

Tests:

tests/e2e/multi-select-layout.test.ts: list to next row is 8px with and without the custom row. Fails on master's CSS (0px).
tests/e2e/macro-builder-layout.test.ts: under phone classes, each row's button is under 100px and the input more than twice as wide. Fails on master's CSS (Add 471px).
src/gui/choiceList/AddChoiceControls.test.ts: phone titles are just the type names (fails on master); desktop titles keep the descriptions.

Checks: pnpm run build-with-lint, pnpm run test (6606 passed), .agents/run-e2e on a clean vault (401 passed, 24 Templater-only skipped). No release or migration impact.

Fixes #2128

Note

Fix multi-select footer gap and phone layouts for choice menu and Macro builder

On phones, the New choice menu now shows only each choice type's label; desktop keeps the label plus description (AddChoiceControls.svelte)
Adds phone-scoped CSS rules in styles.css so quick-add and macro-builder command-sequence inputs take the remaining row width while buttons keep their intrinsic width
Moves the multi-select list spacing from the custom-value row's top margin to the list's bottom margin, keeping an 8-pixel gap between the list and the following row
Adds component tests for the choice menu titles and end-to-end tests for macro-builder input/button widths and multi-select gaps

^{Macroscope summarized 49f4f67.}

Summary by CodeRabbit

Improvements
- On phones, choice menus show concise labels, and command-sequence inputs have more room alongside their buttons.
- Adjusted spacing between multi-select lists and custom-entry rows for a consistent layout.
Tests
- Added checks for phone and desktop choice menus, phone layout sizing, and multi-select spacing.

Without the custom-value row, the footer's top rule sat on the list's bottom border. The 8px gap now belongs to the list, so it's there whichever row follows. Refs #2128

On a phone Obsidian makes every input and button in a modal's setting row full width, so a row's input and its Add button split it and the placeholders were cut mid-word. Buttons there now take their own width. Refs #2128

…ones A phone's menu rows are one ellipsized line, so each entry was cut mid-word. Desktop keeps the descriptions. Fixes #2128

chatgpt-codex-connector · 2026-10-01T15:49:00Z

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-01T15:51:39.660089Z	`49f4f67`	PR opened

ℹ️ 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 · 2026-10-01T15:49:23Z

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: 500089f0-cf23-4773-a90f-778b4927a6a0

📥 Commits

Reviewing files that changed from the base of the PR and between 22d82a6 and 49f4f67.

📒 Files selected for processing (5)

src/gui/choiceList/AddChoiceControls.svelte
src/gui/choiceList/AddChoiceControls.test.ts
src/styles.css
tests/e2e/macro-builder-layout.test.ts
tests/e2e/multi-select-layout.test.ts

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

📝 Walkthrough

Walkthrough

The changes adjust phone choice menu titles, macro builder row sizing, and multi-select list spacing. Unit and end-to-end tests cover the updated menu titles and layouts.

Changes

Phone and picker layout adjustments

Layer / File(s)	Summary
Phone choice menu titles `src/gui/choiceList/AddChoiceControls.svelte`, `src/gui/choiceList/AddChoiceControls.test.ts`	Phone menu items show each choice type’s label without its description. Desktop menu items retain both. Tests check the titles on both platforms.
Phone macro builder rows `src/styles.css`, `tests/e2e/macro-builder-layout.test.ts`	Phone layout rules let command-sequence inputs flex while non-icon buttons keep their intrinsic width. The end-to-end test checks the widths of the inputs and buttons.
Multi-select footer spacing `src/styles.css`, `tests/e2e/multi-select-layout.test.ts`	Spacing moves from above the custom-entry row to below the list. The end-to-end test checks the gap with and without a custom-value row.

Priority: ⬇️ Low

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

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 49f4f

The changes shorten phone menu labels and improve macro input sizing and picker spacing. No actionable merge-blocking risk is identified; merge after normal checks pass.

🚥 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 accurately summarizes the three primary UI fixes: the multi-select footer gap, the phone New choice menu, and the phone Macro builder layout.
Linked Issues check	✅ Passed	The changes satisfy the coding requirements in [`#2128`]. `src/styles.css` moves the multi-select spacing to the list, so the 8px gap remains when the custom-value row is absent or present. The phone se…
Out of Scope Changes check	✅ Passed	The pull request changes stay within [`#2128`]. The source changes implement the three requested layout fixes. The added unit and end-to-end tests verify those fixes. No unrelated product behavior or un…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…

✨ Finishing Touches

📝 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

_{A rabbit taps the phone-sized menu,
Three short labels come into view.
The inputs stretch; the buttons stay,
The list gets room beneath its way.
Tests check each layout, line by line,
Then hops away, pleased with the design.}

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

chhoumann added 3 commits October 1, 2026 15:41

fix(ui): keep the multi-select footer off the list's border

9d46d12

Without the custom-value row, the footer's top rule sat on the list's bottom border. The 8px gap now belongs to the list, so it's there whichever row follows. Refs #2128

fix(macro): give the macro builder's inputs the row on phones

4434e60

On a phone Obsidian makes every input and button in a modal's setting row full width, so a row's input and its Add button split it and the placeholders were cut mid-word. Buttons there now take their own width. Refs #2128

fix(settings): name only the choice type in the New choice menu on ph…

49f4f67

…ones A phone's menu rows are one ellipsized line, so each entry was cut mid-word. Desktop keeps the descriptions. Fixes #2128

chhoumann linked an issue Oct 1, 2026 that may be closed by this pull request

Multi-select footer rule and phone layouts of the New choice menu and Macro builder #2128

Closed

chhoumann merged commit 4d4b390 into master Oct 1, 2026
15 checks passed

Navigation Menu

Uh oh!

fix(ui): multi-select footer gap and phone layouts of the New choice menu and Macro builder - #2131

fix(ui): multi-select footer gap and phone layouts of the New choice menu and Macro builder#2131
chhoumann merged 3 commits into
masterfrom
2128-multi-select-footer-rule-and-phone-layouts-of-the-new-choice-menu-and-macro-builder

chhoumann commented Oct 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

chatgpt-codex-connector Bot commented Oct 1, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 1, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

chhoumann commented Oct 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fix multi-select footer gap and phone layouts for choice menu and Macro builder

Summary by CodeRabbit

Uh oh!

chatgpt-codex-connector Bot commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

coderabbitai Bot commented Oct 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

chhoumann commented Oct 1, 2026 •

edited by coderabbitai Bot

Loading

chatgpt-codex-connector Bot commented Oct 1, 2026 •

edited

Loading

coderabbitai Bot commented Oct 1, 2026 •

edited

Loading