search

usdigitalresponse / usdr-gost

USDR-hosted grants management tools
http://grants.usdigitalresponse.org
Apache License 2.0
30 stars 21 forks source link

In My Grants - Cost Sharing dropdown cuts of 'Yes' & 'No' slightly #984

Closed swatisqa1 closed 1 year ago

swatisqa1 commented 1 year ago

Env: Staging

Steps to Repro:

  1. Navigate to My Grants tab
  2. Click on 'Cost Sharing' drop down
  3. Expected: See 'Yes' or 'No' fully visible

Actual: Yes is partially cut off - see image enclosed

CostSharing

as1729 commented 1 year ago

Thanks for identifying and filing this bug! I'm going to move this to the project backlog.

misspran commented 1 year ago

I think this might have been fixed? Or is it for specific screen sizes? Looks ok on my screen.

Image

jakekreider commented 1 year ago

I can reproduce this locally if my (Chrome) window is < ~1300px wide, which shrinks the multiselect box and not leaving much room for the :after content (related https://github.com/shentao/vue-multiselect/issues/62).

image

I'll take this if no one else is on it. A few possible approaches here if a designer wants to weigh in:

  1. Fix these multiselect fields to a larger minimum width to accommodate content & label. Will affect screen responsiveness.
  2. Decrease the label padding to buy room down to a certain screen resolution (is there an official supported device width?)
  3. Disable these "Press enter to select" labels altogether; I'm not sure they add anything with the highlight affordance (unless there are a11y implications I can't speak to)?

I'm new to the project & appreciate any guidance, thanks!

mhuang-usdr commented 1 year ago

Welcome to the team! If you don't see anyone assigned to the ticket, feel free to take it!

I also highlighted this question in slack to see if one of our designers can jump in.

Product context in case it's useful: our users exclusively use desktop computers, we don't have an official supported device width but we're designing with full monitors in mind.

agn-dsgn commented 1 year ago

Hi! Volunteer designer here. My rec is to go with option 3 and remove the “Press enter to select” label! I rarely see this in dropdown fields, since the selection action is implied.

Slack discussion: https://usdigitalresponse.slack.com/archives/C0473BJ7HGE/p1679943934583849

caitlinwinner commented 1 year ago

agree!

jakekreider commented 1 year ago

Thanks all! ~I don't have rights to assign myself yet~, but will put up a PR this evening for the fix.