Smart search field: resize with the viewport
Created by: lguychard
Fixes #7692
The Monaco editor doesn't automatically resize with its container, so explicitly calling editor.layout()
is necessary.
This is problematic when parents of the smart search field are flex items, as flex items don't shrink past their content's width, unless they explicitly have a 0 min width - and the Monaco editor's width will only be adjusted as a result of calling editor.layout()
, if its container has shrunk.
In addition to fixing resize observer logic, this introduces a flex-shrink-past-contents
utility class, applied to parents of the smart search field, that sets a min width of 0 and flex-shrink: 1
.
Merge request reports
Activity
Created by: lguychard
@felixfbecker thanks for your thoroughness
!Cleaned up CSS to avoid conflicts in !10636 (merged)
The query input will shrink to a minimum of 12rem (and will never cut the toggles):
The search page will shrink to a minimum of 49rem: