fix(tui): scroll long picker lists so they don't overflow the viewport#978
Open
gewenyu99 wants to merge 9 commits into
Open
fix(tui): scroll long picker lists so they don't overflow the viewport#978gewenyu99 wants to merge 9 commits into
gewenyu99 wants to merge 9 commits into
Conversation
Single-column PickerMenu (single- and multi-select) rendered every option unconditionally, so a long list — e.g. the self-driving "connected tools" multi-select with 30+ options — overflowed the terminal and pushed the Confirm button off screen. Add terminal-height-aware windowing to PickerMenu, mirroring the existing GroupedPickerMenu pattern: a usePickerViewport hook derives a row budget from the terminal height, scrolls the visible window to keep the focused row in view, and renders "↑/↓ N more" indicators. Windowing engages only for single-column pickers that don't fit; short lists and multi-column grids render exactly as before. Generated-By: PostHog Code Task-Id: f40c1784-7368-4811-83d0-2d69a844b6c5
🧙 Wizard CIRun the Wizard CI and test your changes against wizard-workbench example apps by replying with a GitHub comment using one of the following commands: Test all apps:
Test all apps in a directory:
Test an individual app:
Show more apps
Results will be posted here when complete. |
The Input demo's multi-select had only 4 options, so it never triggered PickerMenu's viewport windowing. Add a MultiLong step with 30+ options so the playground demonstrates the scroll indicators and cursor-following window introduced in this PR. Generated-By: PostHog Code Task-Id: f40c1784-7368-4811-83d0-2d69a844b6c5
The scroll window sized itself to the full terminal height, so on a tall terminal a long picker filled the whole viewport. Clamp the visual budget to 12 rows in PickerMenu and GroupedPickerMenu, keeping known breathing room above and below regardless of terminal size. Generated-By: PostHog Code Task-Id: 64dfb953-a7c2-44d2-a241-89f06bf7e4f7
PromptLabel rendered an empty row when no message was set, and the multi picker always added marginTop below it, so ask-modal pickers (which render the prompt in the modal body) opened with four blank lines before the first option. Render no label row without a message and gate the marginTop on it. Generated-By: PostHog Code Task-Id: 64dfb953-a7c2-44d2-a241-89f06bf7e4f7
Renders the WizardAskScreen composition (ModalOverlay + paragraph + label-less picker) across four variants — long scrolling multi-select, multi-select with descriptions, single-select, and GroupedPickerMenu — so height capping and spacing are eyeballable in the playground. Also gate GroupedPickerMenu's label marginTop on an actual message, matching PickerMenu. Generated-By: PostHog Code Task-Id: 64dfb953-a7c2-44d2-a241-89f06bf7e4f7
… keys The scroll window kept offset state and threaded scrollTo through every navigation handler. Derive the visible page from the focused index instead: no state, ↑/↓ flip pages as focus crosses an edge, and n/p jump a whole page (advertised in the hints bar and the "more" indicators). Also dedupe LONG_OPTIONS into a shared export. Generated-By: PostHog Code Task-Id: 64dfb953-a7c2-44d2-a241-89f06bf7e4f7
Reaching Confirm in a long multi-select meant walking the whole list (or knowing the hidden up-wrap). Bind s to submit the current selection from anywhere, in both MultiPickerMenu and GroupedPickerMenu, advertised in the hints bar. Pages now hold a fixed option count sized to the tallest row, replacing per-option cost chunking with arithmetic. Key the demo pickers per step so selection state doesn't bleed between steps. Generated-By: PostHog Code Task-Id: 64dfb953-a7c2-44d2-a241-89f06bf7e4f7
Drop the s-submit shortcut. In paged pickers ↑/↓ no longer walk the whole list: they move within the visible page, and stepping past either edge lands on the Confirm button. Pages change only via n/p. Single-select wraps within the page. The up/down handlers collapse to one direction- parameterized path. Generated-By: PostHog Code Task-Id: 64dfb953-a7c2-44d2-a241-89f06bf7e4f7
"↑ 10 more [P] for previous page" / "↓ 27 more [N] for next page". Generated-By: PostHog Code Task-Id: 64dfb953-a7c2-44d2-a241-89f06bf7e4f7
gewenyu99
marked this pull request as ready for review
July 25, 2026 00:47
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
We have wayyyy too many choices. There is a separate fix for the wizard to not surface like 30 options at once, but pagination meanwhile so it doesn't overflow
Before:
Now:
Screen.Recording.2026-07-24.at.8.46.03.PM.mov