feat(cxl-ui): [cxl-marketing-nav] add scroll indicator for large menus

[anoblet]

Clickup: https://app.clickup.com/t/861mkj72q

Previous PR: #274

[github-actions]

size-limit report 📦

Path	Size
packages/cxl-ui/pkg/dist-web/cxl-ui.js	33.73 KB (+0.44% 🔺)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js	11.87 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js	24.9 KB (0%)
packages/cxl-ui/pkg/dist-web/vendor.js	125.6 KB (0%)
packages/cxl-ui/pkg/dist-web/cxl-ui-jwplayer.js, packages/cxl-ui/pkg/dist-web/cxl-ui-playbooks.js, packages/cxl-ui/pkg/dist-web/cxl-ui.js, packages/cxl-ui/pkg/dist-web/manifest.js, packages/cxl-ui/pkg/dist-web/unresolved.js, packages/cxl-ui/pkg/dist-web/vendor.js	197.26 KB (+0.08% 🔺)

[pawelkmpt]

@anoblet it'd be useful to have screenshot here, so I created one:

Proposed scroll indicator is too heavy. It should be something lightweight. Take a look at the horizontal cue we have for menus:

White gradient background with an arrow would be better.

[anoblet]

@pawelkmpt Updated

[pawelkmpt]

@pawelkmpt Updated

Looks better. Can we make it clickable like horizontal menu cues are?

[anoblet]

@pawelkmpt Updated

[pawelkmpt]

I tested and when I get to the end of the list cue disappears in weird way making scrollbar smaller. It makes an impression of all elements jumping.

https://www.loom.com/share/bf9c27ac14e540e7b0d75bfb7aa3d80f

Can we do sth about it?

[lkraav]

Another "Should this even be done" discussion https://app.clickup.com/t/861mkj72q?comment=90040011549686

[anoblet]

@pawelkmpt I wasn't sure if it was more confusing to keep the scroll indicator once the user reached the bottom or not. I've updated this PR to keep the scroll indicator.

[pawelkmpt]

@pawelkmpt I wasn't sure if it was more confusing to keep the scroll indicator once the user reached the bottom or not. I've updated this PR to keep the scroll indicator.

@anoblet I tested and it still has weird feeling because it's permanently visible there and clickable even if there's no more items at the and.

Ideally it should:

• show bottom cue when there are items below the fold,
• hide bottom cue when we get to the end of the list:
  • no jumping,
  • no padding,
• show top cue when we start scrolling,
• hide top cue when we get to the top of the list.

I'd try to achieve it with ::before ::after pieces and/or something absolutely positioned to avoid any padding/margin issues.

Is it doable with components setup we have?