addon-jest test total and time total overlap "Todo" text on small screens.

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to ‘https://storybookjs.now.sh/official-storybook/?path=/story/addons-jest--with-tests’ in a narrow width browser.
2. Click on the Tests panel.
3. Scroll down to see the tests panel.
4. See the total number of tests and total time covering up the “Todo” text.

Expected behavior The text does not overlap.

Screenshots If applicable, add screenshots to help explain your problem. Code snippets If applicable, add code samples to help explain your problem.

System: Please paste the results of npx -p @storybook/cli@next sb info here.

System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    npm: 6.12.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 69.0.2
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-a11y: ^5.2.5 => 5.2.5
    @storybook/addon-actions: ^5.2.5 => 5.2.5
    @storybook/addon-docs: ^5.2.5 => 5.2.5
    @storybook/addon-jest: ^5.2.5 => 5.2.5
    @storybook/addon-knobs: ^5.2.5 => 5.2.5
    @storybook/addon-links: ^5.2.5 => 5.2.5
    @storybook/addons: ^5.2.5 => 5.2.5
    @storybook/react: ^5.2.5 => 5.2.5
    @storybook/theming: ^5.2.5 => 5.2.5

Additional context I looked into this a little bit and discovered that the Accessibility addon has solved this issue by dropping down the “highlight results” checkbox to the next line. The total tests and total time for for the addon-jest is absolutely positioned and seems to be setup a bit differently than that addon.

[garyvh2]

@domyen sounds good, so we are looking for a standard implementation on TabsState component from the lib, with something like what you mentioned above?

I’ll work on a possible solution integrating both addons with the same component.

[domyen]

Ideally, we’d use the same Tab component in Jest and A11y addons. I think the a11y addon has the correct design for this case so further investment in css for just this addon would end up diverging both further.

@garyvh2 Would you be keen to help consolidate the tab implementations to solve this once and for all for everyone? I’d imagine it’d be a standard tab component + a prop that allowed you to render a node in the top right.