Add scroll shadow to #multipage-nav wrapper for overflowing screens

[ramram-mf]

Description

This PR attempts to mitigate the overflowing wrapping layout of secondary navigation for non mobile screens by adding a scroll shadow feature to the container, which displays a subtle shadow on the sides where overflowing elements are present.

Current state:

Fixed state:

Link to sample test page: https://foundation-s-tp1-175-se-pxywdd.herokuapp.com/en/what-we-fund/
Related PRs/issues: #10858

┆Issue is synchronized with this Jira Story

[robdivincenzo]

Thanks @ramram-mf, adding @nancyt1 for a design review as well!

Nancy, what do you think about this treatment of a horizontal scroll in response to #10858?

[robdivincenzo]

Code approved @ramram-mf! Ideally our plan is to move away from using .scss, but we may have to for this element since it's still using it and a full refactor of the element seems out of scope for this issue.

Please hold off on merging until Nancy takes a look. Thanks!

[nancyt1]

@ramram-mf @robdivincenzo Can this be a white gradient instead? or a lighter grey if white doesn't look right?

[ramram-mf]

@ramram-mf @robdivincenzo Can this be a white gradient instead? or a lighter grey if white doesn't look right?

@nancyt1 due to how this solution is structured, doing a white gradient is not viable since hiding the gradient is achieved by overlaying a white layer on top of it, we can try a lighter gray easily but to test a white gradient we would need to pivot our approach to a javascript based one. I will be submitting the lighter gray variant in a moment for you guys to review.

[ramram-mf]

This would be a lighter shadow variant:

[nancyt1]

@ramram-mf This page on the category pill buttons has an example of what I mean with the white gradient. Is that solution feasible in this context?

[robdivincenzo]

If I'm understanding this a bit better- it sounds like to do the white gradient, we will lose the disappear / reappear gradient effect. But since we prefer the design to be consistent with the rest of the site, so we should continue to mimic the white gradient example that @nancyt1 linked.

My 2 cents- I'm ok with losing the additional effects to opt for consistency (even though they're really nice!). And I agree with @ramram-mf that we shouldn't pivot to JS.

[ramram-mf]

I've implemented the suggested feature aiming for consistency this time, with white gradients. It does lack the left gradient just as in the reference due to the constraints of tailwind utility classes. It currently fails to let the user know that there are more elements out of view from the scrolling area because of specific content layout, since there are no overflowing elements that positioned are in the container boundaries at load time.

64px of white gradient to the right, reference had 24px

No gradient to the left

I'm not convinced this would help (as is) user experience. Would love to hear your thoughts on the matter @nancyt1 @robdivincenzo.

[nancyt1]

@ramram-mf Actually, talking about this further at crit, we were thinking the better solution for now is just stacking the elements into 2 rows like mozilla festival has it. This will allow all links to be visible at once and doesn't need anything fancy. Would that work?

[ramram-mf]

Ok here is the revised version of the secondary navigation, this time wrapping around overflowing elements following UI style taken from Mozfest navigation.