Fix for leftover width less than half of container/screen size

jduthon commented 1 week ago

Description

During implementation of the carousel, we noticed sometimes a weird behavior where the amount that can be scrolled left does not go all the way to the end of the content.

See example from this before recording

https://github.com/FormidableLabs/nuka-carousel/assets/4168055/b7fc3495-ec21-4c69-a9d4-f9c5213f176b

You can notice there the scroll stops at the Slide 8, but technically there are 10 slides (so the last slide is numbered 9)

This is due to the number of pages being calculated as a rounded value, hence if the leftover width is less than half of the container size, the number of pages will be rounded down to the lower value and it'll be impossible to scroll to the end with the buttons/scroll indicators.

I propose the following fix:

Use a ceiled value instead of the rounded one, so it'll always include the last missing leftover part
I calculated the last scroll value as a modulo of the width so that the scroll value is precise. It's not technically mandatory (at least for Chrome) as the browser only scrolls to the available content, but I thought if this value is ever used for some other computations it might make sense to have it be precise

Here is the after result from the same story at the same screen size:

https://github.com/FormidableLabs/nuka-carousel/assets/4168055/85933140-837b-44f3-9e25-d7424c318fd1

Type of Change

[x] Bug fix (non-breaking change which fixes an issue)
N/A New feature (non-breaking change which adds functionality)
N/A Breaking change (fix or feature that would cause existing functionality to not work as expected)
N/A This change requires a documentation update

How Has This Been Tested?

Covered with unit tests
Tested on the storybook examples

Checklist

[X] My code follows the style guidelines of this project (I have run pnpm run lint)
[X] I have added tests that prove my fix is effective or that my feature works
[X] New and existing unit tests pass locally with my changes (I have run pnpm run test:ci-with-server/pnpm run test)
[x] I have performed a self-review of my own code
[X] I have commented my code, particularly in hard-to-understand areas
N/A I have made corresponding changes to the documentation
[x] I have recorded any user-facing fixes or changes with pnpm changeset.
[x] My changes generate no new warnings
[x] Any dependent changes have been merged and published in downstream modules