🐛 On small resolution screens Autocomplete results are wider than the input
Closed this issue · 6 comments
Describe the bug
When an Autocomplete field opens the result view, the list is wider than it's trigger.
Steps to reproduce
On a small screen type anything in an Autocomplete field.
Expected results
The results are the same size as the trigger.
This seems to only happen on non fluid inputs, I would guess that using a fluid input on mobile is more than recommended as a default input has a fixed width and would overflow in a mobile view.
@patricklafrance any thoughts on this?
Yes of course it would only happen on non fluid inputs.
Yes I agree, in fact every input should be fluid by default on mobile.
@fraincs If your closing this one, should there be another issue to update every Orbit's inputs component to be fluid by default for smaller breakpoints?
@patricklafrance I was assuming the consumer would deal with that. As smaller breakpoints means nothing, we don't want to assume anything, a form could be in a sidebar in a wide viewport and would fail. Can't wait for container queries ;p
The idea is usually to offer great defaults. I feel like it's kind of annoying for the consumer to have to specify the "fluid" prop for small breakpoint on and on.
I wouldn't feel this way if the inputs didn't have hardcoded min-width but since it's the case I believe a default to fluid make sense here on small breakpoints.
Furthermore, if for a 1% usecase the default is not right, the consumer could opt out be specifying fluid={false} on the input component.