Skip to content
Snippets Groups Projects

Smart search field: resize with the viewport

Merged Administrator requested to merge lg/monaco-resize into master

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

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Created by: lguychard

    @felixfbecker thanks for your thoroughness :pray: !

    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):

    image

    The search page will shrink to a minimum of 49rem:

    image

Please register or sign in to reply
Loading