Add a search field on model selector / improve mobile display #17765
Conversation
allozaur
left a comment
allozaur
left a comment
There was a problem hiding this comment.
Added few improvements in ServeurpersoCom/pull/3 ;)
Several structural & UX improvements for Models Selector component
Use Floating UI's auto-positioning with 50dvh height limit and proper collision detection instead of forcing top positioning. Fixes overflow on desktop and mobile keyboard issues
|
Now we're good @allozaur ! I adjusted the popover positioning to prevent it from overflowing the screen on both desktop and mobile. The main changes are removing the forced side="top" positioning to let Floating UI handle placement automatically, and using max-h-[50dvh] to ensure the menu adapts to the actual viewport size (including when the mobile keyboard is open). I also restructured the layout with proper flexbox so scrolling works correctly |
allozaur
left a comment
allozaur
left a comment
There was a problem hiding this comment.
Let's just update the image/video demos in the description and we are good to go :)
|
If we are demanding in terms of UX ergonomics the search field could be placed below the list to minimize user input movement when the list is compressed during a search. (the popover can already "flip" above or below depending on the available space) |
You are absolutely right |
ServeurpersoCom
force-pushed
the
models-search
branch
from
813d61f to
e46576e
Compare
Place search at the 'near end' (closest to trigger) by swapping layout with CSS flexbox order based on popover direction. Prevents input from moving during typing as list shrinks
|
We're good! We'll look at this sidebar button issue separately! |
2 participants
Make sure to read the contributing guidelines before submitting a PR
Add a search field to the model selector / Improve mobile display / Simplify the code
Close #17741