Fix: Do not overscroll the Teams filter

[rumzledz]

Description

The left scroll's distance multiplier was somehow causing the team filter to shift way beyond the boundaries so I set it to match the right scroll's distance multiplier, 0.5.

Before	After

Testing

Note

I don't know any other way for anyone to test this apart from doing this in a Simulator

1. Open the app on an iOS simulator
2. Go to the Planex colony dashboard
3. Click the right arrow for the Teams filter
4. Click the left arrow for the Teams filter
5. Verify that the Team filter is not overly scrolled to the point that there is an empty space to its left
6. To compare, simply checkout to the master branch and redo steps 2 to 4

Resolves #3540

[bassgeta]

Hahahah I am sorry for this <3
But thanks for the simple fix, nice one 😎
Tried scrolling, dragging, everything seems to work as intended 👌

arrow-overscroll-2024-12-16_20.34.46.mp4

[Nortsova]

Nice catch, @rumzledz 😄

[mmioana]

Nice start on this issue @rumzledz 🙌

However, I still experience some issues if I select Andromeda for eg. and then try to scroll left

Screen.Recording.2024-12-18.at.22.04.45.mov

I'm leaving my thoughts on how we should maybe refactor the scrollLeft and possibly also the scrollRight functions to properly work

For scrollLeft, we need to ensure the scroll value stays within the available scrollable space. Since -clientWidth * 0.5 could exceed the remaining scrollable space, we should first calculate the remaining space. If the remaining space is smaller than clientWidth * 0.5, we use the remaining space as the scroll offset instead of scrolling by half the width of the container.

Thus this should do the trick

const scrollLeft = () => {
    if (!containerRef.current) {
      return;
    }

    const { clientWidth, scrollLeft: currentScrollLeft } = containerRef.current;
    const boundedScrollLeft = Math.min(clientWidth * 0.5, currentScrollLeft);
    containerRef?.current.scrollBy({
      left: -boundedScrollLeft,
      behavior: 'smooth',
    });
  };

Pretty similar logic also for the scrollRight - which I know is not intended in this PR, but I did notice the right overscroll

const scrollRight = () => {
    if (!containerRef.current) {
      return;
    }

    const {
      clientWidth,
      scrollLeft: currentScrollLeft,
      scrollWidth,
    } = containerRef.current;
    const remainingScroll = scrollWidth - currentScrollLeft - clientWidth;
    const boundedScrollLeft = Math.min(clientWidth * 0.5, remainingScroll);
    containerRef?.current.scrollBy({
      left: boundedScrollLeft,
      behavior: 'smooth',
    });
  };

🙌

[mmioana]

Thanks for the changes @rumzledz 🥇 I'll approve given I've already tested them 💯

[bassgeta]

Another day, another dollar
Another year, another overscroll issue solved 😎

overscroll-fix-2025-01-07_15.35.02.mp4

🚢

[iamsamgibbs]

Perfect! All working very nicely.

Screen.Recording.2025-01-09.at.14.16.52.mov