Set width property to tokens container
What does this MR do?
This issue fixes #196074 (closed).
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
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
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)