fix: StoryResponsivePreview vertical resize

[Mobyrr]

Description

fix the preview that could not being visually resized vertically.

it's a problem that could not appear because two rules have equals css specificity.

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• If it's a new feature, provide a convincing reason to add it. Ideally, you should open a suggestion issue first and have it approved before working on it.
• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[netlify]

✅ Deploy Preview for histoire-controls ready!

Name	Link
🔨 Latest commit	98dbb2d
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-controls/deploys/660428ad273e570008e2540f
😎 Deploy Preview	https://deploy-preview-704--histoire-controls.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-examples-svelte3 ready!

Name	Link
🔨 Latest commit	98dbb2d
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-svelte3/deploys/660428ade70d6e00088ad709
😎 Deploy Preview	https://deploy-preview-704--histoire-examples-svelte3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-examples-vue3 ready!

Name	Link
🔨 Latest commit	98dbb2d
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-examples-vue3/deploys/660428adf4f671000820c334
😎 Deploy Preview	https://deploy-preview-704--histoire-examples-vue3.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for histoire-site ready!

Name	Link
🔨 Latest commit	98dbb2d
🔍 Latest deploy log	https://app.netlify.com/sites/histoire-site/deploys/660428ad1a7010000885cc3d
😎 Deploy Preview	https://deploy-preview-704--histoire-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Akryum]

Do you have an example story that exhibit this behavior?

[Mobyrr]

It doesn't depends of the story but how the css is construct and ordered

on https://controls.histoire.dev/story/histoire-controls-src-components-checkbox-hstcheckbox-story-vue?variantId=histoire-controls-src-components-checkbox-hstcheckbox-story-vue-0 if you try to resize vertically the story, the window of the story will keep the full height

If you look at the css of the problematic div :

(theses selectors have the same specificity of (0, 1, 0))

removing the htw-h-full class doesn't seems to cause any problem and fix the issue