Skip to content

[Issues list] Sort selector gets pushed out of the viewport when search filters are too long

Summary

On the issues list page in desktop view, if a user types in several search parameters, it will push the sort selector out of the viewport and cut if off from the user.

Steps to reproduce

  1. Go to Issues > List
  2. Type in several search filters
  3. Keep typing until the search area expands horizontally
  4. Notice that the sorting selector ("Weight" by default) is pushed to the right and gets cut off
  5. The user is not able to scroll right to see or select the selector

What is the current bug behavior?

  • The sort selector is cut off
  • User is unable to see the selector fully or the options
  • User is unable to click sort direction

What is the expected correct behavior?

  • The sort selector should be fully visible
  • User is should be able to see the selector fully and its options
  • User is should be able to click sort direction

Relevant logs and/or screenshots

Screenshot_2019-12-25_at_9.17.18_PM

Screenshot_2019-12-25_at_9.18.45_PM

Screenshot_2019-12-25_at_9.20.03_PM

Output of checks

This bug happens on GitLab.com as well as on self hosted instances

Possible fixes

In app/views/shared/issuable/_search_bar.html.haml

  .issues-details-filters.filtered-search-block.d-flex.flex-column.flex-lg-row{ class: block_css_class, "v-pre" => type == :boards_modal }
    .d-flex.flex-column.flex-md-row.flex-grow-1.mb-lg-0.mb-md-2.mb-sm-0.w-100