[Scrollable]adjust scroll to bottom for lower resolution issues

[rox163]

WHY are these changes introduced?

When launching our draft orders feature, a merchant reported an issue with the scrolalble area on th e product resource picker. The 'fetch more' action didnt seem to trigger when they scrolled to the bottom of a paginated list. The support specialist in touch with the merchant seemed to have narrowed it down to be reproducible only on lower resolution screens.
See original issue here

Broken scroll (it shouldve loaded 4-5 more more products after Sleek Granite shoes)

WHAT is this pull request doing?

After some pairing and irl chats with @dleroux we decided to add a small buffer to the height detection for the scrolledToBottom action on a Scrollable component. Unfortunately none of our dev machines are able to go down to a lower resolution so i cant reproduce the original problem locally.

Gif of playground testing with a scrollable modal

Browserstack test on Windows Edge (scroll in general was pretty slow and jumpy in Edge through browserstack fyi):

Gif of browserstack with low res and zoom WITH the fix

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React, {useCallback, useRef, useState} from 'react';

import {Button, Modal, Page, Stack, TextContainer} from '../src';

export function Playground() {
  const [active, setActive] = useState(true);
  const node = useRef(null);


  const toggleModal = useCallback(() => setActive((active) => !active), []);

  const activator = <Button onClick={toggleModal}>Open</Button>;

  return (
    <Page title="Playground">
      <div style={{height: '500px'}}>
        <Modal
          activator={activator}
          open={active}
          onClose={toggleModal}
          primaryAction={{
            content: 'Close',
            onAction: toggleModal,
          }}
          onScrolledToBottom={() => console.log('scrolled to bottom')}
        >
          <Modal.Section>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <Stack vertical>
              <Stack.Item>
                <TextContainer>
                  <p>
                    You can share this discount link with your customers via
                    email or social media. Your discount will be automatically
                    applied at checkout.
                  </p>
                </TextContainer>
              </Stack.Item>
            </Stack>
          </Modal.Section>
        </Modal>
      </div>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	141.86 KB (+0.01% 🔺)
esm	95.43 KB (+0.01% 🔺)
esnext	138.57 KB (+0.01% 🔺)
css	33.68 KB (0%)

[kyledurand]

I think I follow what's happening here. Can we somehow 🎩 this fix on a low res device in browser stack?

[rox163]

oh browser stack!! ill give that a shot

[rox163]

I just requested access to our shopify browserstack account. so will wait and see.

[rox163]

finally reproduced it in browserstack! Res of 1280x800 and with a 125% zoom set in browser as well!

[kyledurand]

Thanks for 🎩 ing!

[dleroux]

Awesome that you could reproduce finally. 🙇 🎉

[DerekSerre]

Adding on to @rox163 's comment. I can replicate as well by setting the browsers zoom to anything other than 100%. Replicated using a range between 90% - 125% of browsers zoom in chrome on my macbooks native resolution. Also confirmed it happens in Safari on any zoom level, but not firefox. Tested on my own store.