Preview viewport is stuck at 100px tall

[shish]

Summary

Just installed storybook for the first time, tried it on two projects (one rsbuild, one vite) - everything appears to work fine except that all of the tests and the docs run in a weirdly short viewport with a lot of scrolling - is this intentional? Can I make the viewport full screen by default? The "change viewport" button seems to make the viewport the correct size when told to emulate a specific device (eg the "small mobile" is a tall narrow rectangle) -- it's just the default viewport / "reset viewport" which is 100% wide and 100px(?) tall (Also the "docs" view doesn't have viewport controls at all, it's stuck 100px tall)

Additional information

10.2.7

import type { StorybookConfig } from "storybook-react-rsbuild";

const config: StorybookConfig = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
    framework: "storybook-react-rsbuild",
};
export default config;

import type { Preview } from "storybook-react-rsbuild";

const preview: Preview = {
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },
    },
};

export default preview;

Create a reproduction

No response

[dosubot[bot]]

Hi @shish! I'm Dosu and I’m helping the storybook team.

This isn't intentional—it's a browser-specific bug in Storybook 10.2.0+ that affects Firefox ESR 140.x. The preview iframe doesn't take the full height, so you get a very short (about 100px tall) viewport. Upgrading to Firefox 147+ fixes it, but if you need to stay on ESR, you can work around it by adding this CSS to your .storybook/manager-head.html:

<style>
  @-moz-document url-prefix() {
    iframe[title="storybook-preview-iframe"] {
      position: static !important;
      width: 100% !important;
      height: 100vh !important;
    }
  }
</style>

Details & workaround

For the Docs view: viewport controls are not shown by design, but you can set the docs iframe height globally in your preview config:

export const parameters = {
  docs: {
    story: { iframeHeight: '400px' }, // or whatever height you want
  },
};

Docs iframe height config

You can also set a default viewport for Canvas by adding to your preview config:

import { INITIAL_VIEWPORTS } from 'storybook/viewport';

export default {
  parameters: {
    viewport: {
      options: INITIAL_VIEWPORTS,
    },
  },
  initialGlobals: {
    viewport: { value: 'ipad' }, // or any device key you want as default
  },
};

Viewport config example

If you still see the issue after these changes, please let me know your browser version and share a minimal reproduction if possible.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}