`IndexTable` extra padding on mobile

[talbshoam]

Issue summary

There seems to be an issue with the <IndexTable /> on mobile in which the scrollbar is being added to the dom (visibility: hidden) which adds some extra padding to the bottom of the table.

Expected behavior

The table should probably not render a scrollbar if all the content is visible

Actual behavior

Happens in multiple screens:

• products
• customers
• automations

Demo: https://codesandbox.io/p/sandbox/wonderful-bash-54m75x?file=%2FApp.tsx%3A12%2C72

Steps to reproduce the problem

1. go to one of the above pages
2. switch to mobile size
3. if you don't see the extra space simply refresh as sometimes it doesn't happen

Reduced test case

The best way to get your bug fixed is to provide a reduced test case. This CodeSandbox template is a great starting point.

Specifications

• Are you using the React components? (Y/N):
• Polaris version number:
• Browser:
• Device:
• Operating System:

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

[github-actions[bot]]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[tauthomas01]

I just want to bump this thread as our team found this bug as well while working in our app (Combined Listings) that follows the products index page.

https://github.com/user-attachments/assets/408709b0-aeba-4752-ab7e-4234eae5ba6f