Is there a way to change the Storybook story width (ie. storybook-root) selectively?

Question

I'm trying to see if there's a way to change the width for select stories. My component is 100% width which I don't want to change because it is 100% of the parent. For Storybook that would be where id="storybook-root lives. The first screenshots below shows what it looks like by default. I would like to set the width to something like 500px (2nd screenshot).

I understand I can create a html page and add styling within there but that would apply to all stories. I want to be able to update the width for select stories.

Pitchblende

Answer 1

The storybook layout parameter can accept 3 different values namely centered, fullscreen, or, padded, where padded is the default. In the 2nd screenshot shared in the question above the css selector for storybook-root contains .sb-show-main.sb-main-centered which infers that the story layout is set to centered. It can be changed to either fullscreen, or padded. Also ref. https://storybook.js.org/docs/react/configure/story-layout

const meta = {
  title: "Title/ComponentName",
  component: ComponentName,
  parameters: {
    layout: "fullscreen", // or `padded` by default
  },
};

Exurbanite

I'm not currently working in Storybook atm but will nevertheless accept your answer. Hopefully this does the trick. – Pitchblende