[Page] Responsive: Action group title is too close to the top when there are no secondary actions

[rmleg]

Issue summary

When a Page has no secondaryActions, but it does have have an actionGroup with a title, the title of that action group appears too close to the top of the popover menu on mobile.

Expected behavior

There should be more space above the action group title, as when there are secondary actions like in the screenshot below.

Actual behavior

There is very little space above the action group title when there are no secondary actions.

Steps to reproduce the problem

Create a Page that has at least one action group with a title, but does not have any secondary actions. View on mobile and check the spacing above the first title.

Reduced test case

https://codesandbox.io/s/wandering-cherry-9sl4qe?file=/App.js

Click the "toggle responsive preview" icon to view the mobile size and click the ellipsis to open the menu to see the issue.

Specifications

Output of npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris:

Paste the results here:

  System:
    OS: Linux 5.10 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (32) x64 Intel(R) Xeon(R) CPU @ 2.80GHz
    Memory: 65.43 GB / 125.90 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  npmPackages:
    @shopify/polaris: 9.7.0 => 9.7.0
    react: ~17.0.2 => 17.0.2
    react-dom: ~17.0.2 => 17.0.2

[rmleg]

This was originally fixed here: #4355

Looks like the JS logic to add the firstSection class doesn't always work. In the example I tried in storybook, the first section that is rendered actually has an index of 3.