Fix Sort dropdown reflow issue in Todos page

What does this MR do?

• Make "Sort by" dropdown behave the same as filters in narrower viewports (left-aligned, full-width dropdown element)
• Adjust dropdowns to fit on the same line in worst-case scenario ("Oldest created" selected). The float issue is noticeable when viewport is resized to 768 pixels.

Are there points in the code the reviewer needs to double check?

The following CSS classes were changed

• .filter-item

The applied change affects the following pages:

• /app/views/dashboard/todos/index.html.haml
• /app/views/shared/issuable/_filter.html.haml
• /app/views/shared/issuable/_search_bar.html.haml

The following CSS classes were added

• .sort-filter
• .dropdown-menu-sort
• .dropdown-menu-toggle-sort

All new CSS classes only affect the Todos page:

• /app/views/dashboard/todos/index.html.haml

Why was this MR needed?

The "Sort by" dropdown on the Todos page doesn't reflow correctly when you resize the window.

Screenshots (if relevant)

Before

After

Does this MR meet the acceptance criteria?

• Changelog entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #22562 (closed)