Problem/Motivation

The "sort by" dropdown has a fixed width of 152px. This looks nice and helps conserve space in the container it resides in, but it doesn't take into account that a longer option might be selected. In English, only the "Date Created (most recent)" option is cut off, but this could impact more options depending on the language used.

It's not possible to fully see certain options. This could be especially difficult if there are options that begin the same but end differently (such as ending with asc/desc)

This should probably go in even if it "breaks" the design, as the design needs to be able to elegantly handle a certain amount of variation in option length. Having this in HEAD will make it easier to experience what's happening and come up with a good design solution.

Steps to reproduce

Proposed resolution

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Manual Testing
  • ☐ Code Review
  • ☐ Accessibility Review
  • ☐ Automated tests needed/written?
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

bnjmnm created an issue. See original summary.

Vighneshh made their first commit to this issue’s fork.

vighneshh’s picture

Assigned: Unassigned » vighneshh

vighneshh’s picture

Assigned: vighneshh » Unassigned
Status: Active » Needs review
StatusFileSize
new4.13 KB
new5.62 KB

Made some css changes and added before and after screenshots . Please Review

fjgarlin’s picture

Status: Needs review » Needs work

The tests are failing. Whenever you do changes, you need to run "yarn build" so it includes the compiled assets.
Also, the "after.png" still shows how the right parenthesis is nearly cut-off, so maybe a bit of extra spacing is needed on the right side.

omkar-pd made their first commit to this issue’s fork.

omkar-pd’s picture

Status: Needs work » Needs review
StatusFileSize
new15.73 KB

removed fixed height and added build files.

fjgarlin’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new25.14 KB
new19.48 KB

Marking this as RTBC based on

...even if it "breaks" the design

It does look good in the longer option:
Long option

And a bit weird in the not-so-long options:
Shorter option

Perhaps we should also shorten "Date Created (Most Recent)" to "Recently created", but I'm not sure if that's in the scope of this issue. If we do it as part of this issue, it's a one-line change.

tim.plunkett’s picture

Status: Reviewed & tested by the community » Needs work

This needs a rebase anyway due to recent commits, let's also make the change suggested in #9 (please change the reference to it in tests as well).

omkar-pd’s picture

Status: Needs work » Needs review

Made all the changes.

Munavijayalakshmi’s picture

Assigned: Unassigned » Munavijayalakshmi
Munavijayalakshmi’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new11.3 KB
new11.75 KB
Munavijayalakshmi’s picture

Assigned: Munavijayalakshmi » Unassigned

tim.plunkett’s picture

Status: Reviewed & tested by the community » Fixed

Thanks for making the change!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.