[Tabs] Disclosure activator vertical misalignment

[rexmac]

Issue summary

In contrast to Polaris-Tabs__Tab, which is styled with display: block, Polaris-Tabs__DisclosureActivator is currently styled with display: inline-block. This causes extra whitespace to be added above and below the element which messes up the alignment of the hover/selected indicator as shown in the screenshots below.

Expected behavior

Actual behavior

Extra whitespace below tabs' active and hover indicators

Misalignment of disclosure activator's hover indicator

Steps to reproduce the problem

1. Use the Polaris <Tabs> component.
2. Add enough tabs to trigger the display of the Polaris-Tabs__DisclosureActivator button.

Reduced test case

https://codesandbox.io/s/shopify-polaris-react-typescript-playground-tzxms

Specifications

  System:
    OS: macOS 10.14.6
    CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 609.73 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
    Yarn: 1.12.3 - ~/.dev/yarn/1.12.3/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.11.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 67.0
    Safari: 12.1.2
  npmPackages:
    @shopify/polaris: 4.1.0 => 4.1.0
    react: 16.9.0-alpha.0 => 16.9.0-alpha.0
    react-dom: 16.9.0-alpha.0 => 16.9.0-alpha.0