In Firefox, ZoomElement component doesn't resize on child resize

[bowmsamman]

Describe the bug

ZoomElement maintains a height state value that it updates using a ref to a child element and an effect hook. This approach doesn't update the height value if the child element changes in size. This means that if the component being showcased becomes larger (e.g. the component is a list of items that allows items to be added dynamically), the component will overflow the bounds of the container.

Link to the height state value, effect hook immediately following: https://github.com/storybookjs/storybook/blob/master/lib/components/src/Zoom/ZoomElement.tsx#L25

I've only noticed this issue in Firefox. Chrome, Safari and Edge didn't seem to have this issue.

To Reproduce

The following code in a .stories.mdx file should reproduce the issue:

import { useState } from 'react';

<Canvas>
  <Story name="repro">
    {() => {
      const [list, setList] = useState([]);
      const [text, setText] = useState('');
      const push = () => {
        setList([...list, text]);
        setText('');
      };
      const handleChange = (event) => {
        setText(event.target.value);
      };
      return (
        <div>
          <input id="text-input" type="text" value={text} onChange={handleChange} />
          <button type="button" onClick={push}>Push</button>
          {list.map((value) => <div key={value}>{value}</div>)}
        </div>
      );
    }
  }
  </Story>
</Canvas>

System

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 7.11.2 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 91.0.864.48
    Firefox: 89.0
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-a11y: ^6.3.0 => 6.3.0 
    @storybook/addon-controls: ^6.3.0 => 6.3.0 
    @storybook/addon-docs: ^6.2.9 => 6.2.9 
    @storybook/addon-links: ^6.3.0 => 6.3.0 
    @storybook/addon-toolbars: ^6.3.0 => 6.3.0 
    @storybook/addon-viewport: ^6.3.0 => 6.3.0 
    @storybook/addons: ^6.2.9 => 6.2.9 
    @storybook/react: ^6.3.0 => 6.3.0 
    @storybook/theming: ^6.2.9 => 6.2.9 

Additional context
Reproducible in Firefox 89.0.
Could not reproduce in Chrome 91.0.4472.114, Safari 14.1.1, or Edge Version 91.0.864.48.

[Tomastomaslol]

I've only noticed this issue in Firefox. Chrome, Safari and Edge didn't seem to have this issue.

Firefox doesn't support the CSS zoom property so it has its own way of calculating zoom.

https://github.com/storybookjs/storybook/blob/master/lib/components/src/Zoom/browserSupportsCssZoom.ts#L5

storybook/lib/components/src/Zoom/ZoomElement.tsx

Line 6 in 7064642

browserSupportsCssZoom()

I got a very busy week coming up but should be able to fix this next weekend. If someone else would like to give this a go I'm more than happy to provide any support I can.

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.34 containing PR #15472 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.