histoire-dev / histoire-dev/histoire

Grid layout with 100% width shows only 10 variants

Open
#417 3 comments 2 reactions 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

In grid layout with 100% width the maximum amount of variants is not updating/showing correctly and the story only shows first 10 variants. Resizing the window sometimes helps and update/show more variants.

### Reproduction

I took the `histoire-vue3-starter`, updated `histoire` and `@histoire/plugin-vue` to latest version `0.12.4` and created a simple `MaximumVariant` story with 15 variants. https://stackblitz.com/edit/histoire-vue3-starter-ntbrzs?file=src/MaximumVariant.story.vue. Scrolling down only shows 10 variants.

### System Info

```shell
System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i5-10310U CPU @ 1.70GHz
Memory: 2.92 GB / 15.61 GB
Binaries:
Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.20.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.423.0), Chromium (108.0.1462.54)
npmPackages:
@histoire/plugin-vue: ^0.12.4 => 0.12.4
@vitejs/plugin-vue: ^4.0.0 => 4.0.0
histoire: ^0.12.4 => 0.12.4
```

### Used Package Manager

pnpm

### 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

Start with the linked histoire-vue3-starter reproduction and inspect the grid layout's variant rendering and resize handling. Confirm the behavior with a 15-variant story; done means all variants appear at 100% width without requiring window resizing.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.