IndexTable iPhone view

[jredimer2]

Issue summary

When using Bulk Actions with IndexTable, when the screen is shrunk to iPhone dimensions, the BulkAction buttons do not appear when selecting items.

Expected behavior

Bulk Action button should appear when selecting items from IndexTable, even when screen size is iPhone dimensions

Actual behavior

When screen is desktop dimensions, when I select an item from IndexTable, the BulkAction buttons appear.
However, when I shrink the screen to iPhone dimension, the BulkAction buttons do not appear when selecting from IndexTable.

Steps to reproduce the problem

1. Add an IndexTable with Bulk Actions to a page
2. Shrink browser window to iPhone dimensions
3. Select an item from IndexTable, the BulkAction buttons should appear

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: 6.2.1
• Browser: Chrome
• Device: PC
• Operating System: Windows 10

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:

System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-3610QM CPU @ 2.30GHz
Memory: 6.05 GB / 15.92 GB
Binaries:
Node: 14.5.0 - C:\Program Files\nodejs\node.EXE
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 90.0.4430.93
Edge: Spartan (44.19041.906.0), Chromium (90.0.818.51)
Internet Explorer: 11.0.19041.1

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[itsniper]

I was just looking into this and it happens in the example in the Polaris docs as well. Choose "Index Table with bulk actions" and move the screen size slider to mobile size and the actions disappear.

[jredimer2]

Here's my system config

System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-3610QM CPU @ 2.30GHz
Memory: 7.86 GB / 15.92 GB
Binaries:
Node: 14.5.0 - C:\Program Files\nodejs\node.EXE
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 90.0.4430.212
Edge: Spartan (44.19041.964.0), Chromium (90.0.818.62)
Internet Explorer: 11.0.19041.1

[jredimer2]

I'm using React and Polaris components, IndexTable is a Polaris component

[ashleyww93]

This can be fixed by overriding the offending CSS:

.Polaris-BulkActions__Group--largeScreen {
    display: block !important;
}