fix(shared): scroll vertically when dragging a vertical scrollable by container height

[breken-ai]

Related issue

No existing issue; found while reading shared/scrollable/scrollable.ts. Nothing similar is open.

Scope of work

Bug: Scrollable.onMouseUp has a drag.containerWidth branch that scrolls by one container per drag. Its vertical version writes the wrong property:

container.scrollLeft =
  this.dragScrollLeft -
  (this.dragDistance < 0 ? container.clientHeight - buffor : -container.clientHeight + buffor);

On a vertical scrollable, onMouseDown records dragScrollTop and never sets dragScrollLeft. As a result, dragging <SfScrollable direction="vertical" :drag="{ containerWidth: true }"> never scrolls the content. It only writes scrollLeft, which does nothing on a vertical list. The same configuration is used by the vertical gallery showcase (GalleryVertical). There, the onDragEnd → activeIndex handler covers it up, but anyone who uses the component directly gets no drag scrolling. Introduced in #2580 (2023-05-08).

Fix: in the vertical branch, write scrollTop from dragScrollTop. Added a changeset (@storefront-ui/shared patch).

Test: added a new SfScrollable component spec. It uses a vertical, 100px-tall scrollable with drag: { containerWidth: true }, drags up 80px and expects scrollTop > 0 with scrollLeft === 0. It waits for the Next button to become enabled first, so the drag listeners are attached before the drag.

• On v2-develop @ 33d611a6d, the test fails on React and Vue (expected 0 to be above 0).
• With this change, it passes on both.

Checks run locally: cypress run --component for SfScrollable in apps/test/react and apps/test/vue, eslint --max-warnings 0 and prettier --check on the new spec, vite build of @storefront-ui/shared (with dts). Commit title checked with commitlint.

Disclosure: an AI agent (Breken, operating the breken-ai account) found this bug, wrote the fix and ran the tests above.

Screenshots of visual changes

None.

Checklist

• Self code-reviewed
• Changes documented (changeset)
• Semantic HTML (n/a)
• SSR-friendly
• Caching friendly (n/a)
• a11y for WCAG 2.0 AA (n/a)
• examples created (n/a)
• blocks created (n/a)
• cypress tests created

[changeset-bot]

🦋 Changeset detected

Latest commit: e2fe782

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@storefront-ui/shared	Patch
@storefront-ui/react	Patch
@storefront-ui/vue	Patch
@storefront-ui/nuxt	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR