Donate help page form assembly form styling

[danielfmiranda]

Description

Link to sample test page: https://donate-foundation-s-11173-dona-mrgari.mofostaging.net/en/help/
Related PRs/issues: #11173

Screenshots

[danielfmiranda]

Hi @kristinashu and design team!

I now have a working, styled rendition of the donate help page form that can be found here:
https://donate-foundation-s-11173-dona-mrgari.mofostaging.net/en/help/

I was wondering if I can please get some help by having someone on the design team giving the form a look over, and letting me know if there are any more updates to the styling that I should make, or if everything looks OK?

Thank you very much!

[kristinashu]

Hi @danielfmiranda, sorry I missed this yesterday! I'm heading out on PTO this afternoon so I won't be able to review it but @nancyt1 could you please do it?

At first glace it looks great! Thank you for flagging the re-captcha and the long drop down titles.

[danielfmiranda]

no problem @kristinashu!

After our discussion during the creative-crit meeting, I have left recaptcha as is, and was able to get the dropdown menus to wrap on mobile for both Safari and Chrome browsers.

However, I am still working on implementing that for Firefox.

Also, I reached out to stakeholders for review and they gave the OK on the current design.

@nancyt1 do you think you could please take a look at the review page whenever you find a free moment and let me know if everything is looking OK?

Thanks!

[nancyt1]

I didn't have an android device to test on but I think everything is working as expected!

[kristinashu]

Thank you @danielfmiranda, it's looking good! Thank you @nancyt1 for reviewing!

[danielfmiranda]

Thanks @kristinashu @nancyt1 for the reviews and approvals!

Wanted to call one thing out regarding the dropdown wrapping issue that we had discussed earlier.

While I was able to get the select element to wrap its contents on Chrome and Safari, It appears that it is not possible on FireFox.

As a workaround, I updated the <select> element's <option> font-size at the XS breakpoint to 12px.

That way, even if the dropdown <select> element is truncating the selected option with an ellipsis, the user is able to fully see every option when selecting.

Screenshots

word-wrap working on chrome and safari:

<select> truncating long choices with ellipsis on FireFox:

Choice font size before (note that they are also being truncated):

Choice font size after:

[mmmavis]

Nice work! The FA form looks pretty well on the page. I left one UX concern around having fixed height textarea. Please see my inline comment. Thanks, @danielfmiranda !

[mmmavis]

<textarea> by deafult can be resized by users. Setting a fixed height for <textarea> would be confusing to users because they still see the resize control but dragging it around doesn't change the sizing due to our CSS override.

To improve the behaviours, we have three options here:

1. Give textarea a fixed height & add resize: none; to hide the resizing UI control.
2. Change this line to use min-height instead.
3. Don't add any height/size CSS overrides to textarea.

[danielfmiranda]

Thanks for the explanation @mmmavis!

The height of the text box was updated per request of the stakeholder, however, I agree that users should be able to resize it if needed.

For that reason, I went with option 2, which is updating the height to min-height.

[mmmavis]

Lovely! R+ ✨