histoire-dev / histoire-dev/histoire
Buggy resize on responsive preview
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
When responsive stories are resized to be smaller vertically, the bottom of the story sticks to the bottom of the viewport.
### Reproduction
Go to the [demo page](https://vue3.examples.histoire.dev/story/src-components-demo-story-vue?variantId=src-components-demo-story-vue-1), try to resize a story vertically (pull up the bottom).
### System Info
```shell
System:
OS: macOS 13.5.2
CPU: (10) arm64 Apple M1 Pro
Memory: 1.08 GB / 32.00 GB
Shell: 3.6.1 - /usr/local/bin/fish
Binaries:
Node: 20.6.1 - ~/.local/share/nvm/v20.6.1/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.8.1 - ~/.local/share/nvm/v20.6.1/bin/npm
Browsers:
Chrome: 117.0.5938.88
Safari: 16.6
npmPackages:
@histoire/plugin-vue: ^0.17.1 => 0.17.1
@vitejs/plugin-vue: ^4.3.4 => 4.3.4
histoire: ^0.17.0 => 0.17.0
vite: ^4.4.9 => 4.4.9
```
### Used Package Manager
npm
### Validations
- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Research direction
Reproduce the resize behavior on the linked demo page by pulling the story's bottom edge upward. Trace the responsive preview entry point responsible for vertical resizing and verify the story content no longer sticks to the viewport bottom. Done means the reduced-height preview keeps the expected story positioning in the reported browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vite
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100