More responsive modals + cap member picker height#81
Merged
Conversation
Two load-test UX findings on large systems / large monitors: - MemberSelect's chip list had no height cap, so a roster of hundreds pushed surrounding controls (notably the Start button in the switch modal) far below the fold. Cap it at 40vh with its own scroll; the enclosing controls now stay reachable. Applies everywhere the picker is used (start-front, tag/group editors). - Dialogs defaulted to a fixed sm:max-w-lg (512px), cramped on large displays. Default now scales to max-w-2xl at lg+ (>=1024px viewport). Modals with explicit widths still override via className.
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.
Two UX findings from load-testing on a large system / large monitors.
Member picker no longer dominates the modal
MemberSelect's chip list had no height cap, so a roster of hundreds (the load-test profile) pushed the surrounding controls way below the fold. In the switch modal you had to scroll past every member to reach the Start button.Now the chip list caps at
max-h-[40vh]with its own internal scroll. The custom-status field, the "End all current fronts" toggle, and the Start button stay visible no matter the member count. Applies everywhere the picker is used (tag / group editors too).Dialogs are no longer 512px on a 2560 monitor
Default
DialogContentwassm:max-w-lg(512px), cramped on a 1920+ display. Default now scales tomax-w-2xl(672px) atlg+(>= 1024px viewport):Modals that already opted into a different width via
classNamestill win - tailwind-merge resolves the matching breakpoint variant. Sosm:max-w-2xlcontent modals are unchanged.Worth eyeballing
The 40vh picker cap and 2xl default width are reasonable defaults but subjective. Easy to tweak both numbers if they feel off:
40vhinmember-select.tsx->45vh/50vhfor a taller picker.lg:max-w-2xlindialog.tsx->xl(576px) for less aggressive,3xl(768px) for wider on huge monitors.ruff / tsc / eslint clean. Frontend only, no backend changes or migrations.