histoire-dev / histoire-dev/histoire

Buggy resize on responsive preview

Open
#592 3 comments 1 reaction 0 assignees View on GitHub
to triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.