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 ;)
|
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
|
We're good! We'll look at this sidebar button issue separately! |
|
@ServeurpersoCom plz just rebase and push the static build and let's merge it if CI passes! |
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
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
ServeurpersoCom
force-pushed
the
models-search
branch
from
2cdf72c to
a025a2b
Compare
…rg#17765) * webui: add search field to model selector and fixes mobile viewport overflow * webui: simplify model search style and code * refacor: Search Input component & consistent UI for Models Selector search * feat: Use Popover component + improve interactions * fix: Fetching props for only loaded models in ROUTER mode * webui: prevent models selector popover from overflowing viewport 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 * webui: keep search field near trigger in models selector 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 * chore: update webui build output --------- Co-authored-by: Aleksander Grygier <[email protected]>
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