Height problems

[TheKnarf]

Why doesn't it fill the whole height of the pane?

[SimeonC]

Hi, I can't replicate it on the demo site so I'm going to need some more details from you please 🙇

• Storybook Version
• This Plugin Version
• If possible a reproduction where the issue happens - either a Repository or a Replay.io recording

[TheKnarf]

package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "start:storybook": "cross-env STORYBOOK_DISABLE_TELEMETRY=1 start-storybook -p 6006",
    "build:storybook": "cross-env STORYBOOK_DISABLE_TELEMETRY=1 build-storybook"
  },
  "dependencies": {
    "@xstate/react": "^3.0.1",
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "xstate": "^4.33.6"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-docs": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/builder-webpack5": "^6.5.13",
    "@storybook/manager-webpack5": "^6.5.13",
    "@storybook/react": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "@types/node": "18.11.7",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "@xstate/inspect": "^0.7.0",
    "babel-loader": "^8.2.5",
    "cross-env": "^7.0.3",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0",
    "storybook-xstate-addon": "^2.3.1",
    "typescript": "4.8.4"
  }
}

https://github.com/TheKnarf/storybook-xstate-test

[HakimCh]

Hi @SimeonC, @TheKnarf,

I had the same issue, it's introduced with the v2.3.1 version.

[SimeonC]

Thanks for the reproduction, I think this may be related to a storybook internal change as all 2.3.0 changed was the peer dependencies (2.3.1 was weird as it shouldn't have done a release, there's no code changed in that version).

I think the issue was I was waiting in internal storybook render timings to set the height and should change this to rely on a mutation listener to set the height instead. Setting the height to 100% has some weird cases that it doesn't update the height

Due to work pressures it might be a while before I can get around to fixing it but I'm happy to review and merge a PR fixing it if anyone can get it done earlier.

[SimeonC]

Thanks to @HakimCh this should be fixed in 2.3.3. It's on NPM but it looks like some permissions or something have changed since the last time I ran a release so all the other automation like notifying this ticket failed.

[TheKnarf]

I've updated my test repo to version 2.3.6. The problem seems to still preserve. Please re-open the issue.

[SimeonC]

Thanks, had some time today so I booted up a code sandbox to investigate. It looks like there have been some extra divs being added which aren't filling the space correctly.

[steveoh]

Is anyone picking this up to fix?

[SimeonC]

I haven't time to pick it up till late January due to family/work I don't think. Open for PRs.

[steveoh]

I looked at the code and I'm not sure how it can be done. There's a div above what it seems this loads that we don't have control over and can't set a height on. But if I set a height in code the entire machine disappears so ¯_(ツ)_/¯. I've resorted to adding height:100 to the div in the picture above.

[SimeonC]

Did a quick search around and I think this might be related to this issue storybookjs/storybook#17818

It looks like the related PR might fix this problem as well.