desert merlin
The source blocks normally automatically adapt their height to my component but we have a dropdown menu, so the menu doesn't show by default. The container is only as tall as the button so when the menu is open, it gets cut off. I suppose I can just make my own wrapper element, but wanted to check if there was some kind of "height" argument first. I don't see anything in the docs. This is for storybook 7 beta 20 but I figured the answer is generic
mortal sigil
@desert merlin this is just a quick guess, but what if you wrap the button in a fixed-height div? my guess is that the block is measuring the root element after the story renders, and if the dropdown list is rendered outside or after the measurement is made, it would result in what you see there. bit hacky, but should be easier than hacking anything else.
desert merlin
That's what I meant by "I suppose I can just make my own wrapper element" but given no one else has mentioned any alternatives that's what I went a head and did. Always great to have confirmation that it's a reasonable approach though. thanks!
mortal sigil
i imagine those blocks would also have problems with dynamically changing components as well, like Read More... expansions and stuff; the component would have to actively observe resizes of the element, and that could cause the entire document's content to move around. at the same time, it might be worth submitting an issue to discuss whether blocks need a way to explicitly set height.
vestal fjord
I found this type definition of a height prop for the <Story> block: https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/blocks/Story.tsx#L70-L73
But that apparently only applies when the story is not rendered inline (i.e. in an iframe), which has its own downsides.
Would recommend applying any fixed story heights via a decorator or in the story definition (render function) itself.