Editor height shrinks upon click events in standalone mode

[Theophylline]

Steps to Reproduce

1. Install dependencies: create-react-app > npm install --save ketcher-react > npm install --save ketcher-standalone. The resulting package.json is the following:

{
  "name": "editor",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^4.16.2",
    "ketcher-react": "^2.2.1",
    "ketcher-standalone": "^1.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

2. Render the Editor component in App.js. This step is essentially a copy pasta from the documentation. Note that I tried to render a non-full-size editor by placing it inside a fixed <Card /> container, as instructed in Add code example: Embed Ketcher into React SPA #415. But the result is the same if I try to render a full size editor.

import 'ketcher-react/dist/index.css'
import { StandaloneStructServiceProvider } from 'ketcher-standalone'
import { Editor } from 'ketcher-react'
import { Card } from 'antd';
const structServiceProvider = new StandaloneStructServiceProvider()

function App() {
  return (
    <div className="App">
      <Card style={{width: 700, height:500 }}>
        <Editor
          staticResourcesUrl={process.env.PUBLIC_URL}
          structServiceProvider={structServiceProvider}
        />
      </Card>
    </div>
  );
}

export default App;

3. Click on the canvas, and the height shrinks.

Expected behavior
Height should be fixed upon user interaction

Actual behavior
Height decreases upon user interaction

Screenshots
Initial render:

After a few clicks on the canvas:

Desktop (please complete the following information):

• OS: [e.g. iOS] Ubuntu 20.04
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 89

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] n/a
• OS: [e.g. iOS8.1] n/a
• Browser [e.g. stock browser, safari] n/a
• Version [e.g. 22] n/a

Additional context
Trying to include this component as part of a dashboard, so I hope to be able to resize this component and keep its size fixed. If I downgrade ketcher-react to 2.1.0, the problem goes away (i.e height is fixed), but placing <Editor /> in a fixed parent container doesn't resize the component.

[AndreiMazol]

Dear @Theophylline ,

I have analyze your case and want to inform you non-full-size works without any issues if you set fixed size of parent element. In your case antd lib adds some additional elements (please see screen below):

To fix this issue please wrap with <div style={{ width: 700, height: 500 }}>.

Please inform me if this solution works for you.

Best regards,
Andrei

[Theophylline]

Nice this works, thank you!