Skip to content

Set max-width property to tokens container

Muhammad Fawwaz requested to merge abuuzayr/gitlab:196074-sort-selector-pushed-out-2 into master

What does this MR do?

This issue fixes #196074 (closed) and is a clone of !25071 (merged) but with a fresh master.

This was tested on:

Mac OS: Chrome, Firefox, Safari, Opera

Windows: Chrome, Edge, Opera, Firefox

The change looks hackish but it fixes the issue. It might actually require a larger refactoring of the code to fix this issue nicely, but since a revamp of the search filter is underway as I understand, a rewrite would be too much work at this time for temporary work to solve a single issue. Nevertheless, I do think that this issue is an important one, which affects the Issue List search, Boards search at least.

I believe the reason why this width "reset" is required is because we have nested flexbox elements starting from the flexbox holding all the search bar elements, to the ul element holding the search tokens, and they respect the top holding element's container width of 100%. This is why the search bar will push the sort selector out up until it hits the end of the viewport, not beyond.

As for why we are unable to set a px or % for this ul width instead of an arbitrary amount, it is because this bar is used in multiple places with different elements each time, so it might be a different px or % value every time. It also makes the CSS un-reusable. In any case, hardcoding a width is scary and we will have to account for responsiveness.

As always, my theory could be wrong and if so, please do close this MR or let me know the better direction I should take at this time.

Screenshots

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Closes #196074 (closed)

Merge request reports