Buggy resize on responsive preview

[goulashify]

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, try to resize a story vertically (pull up the bottom).

System Info

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
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue 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.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[goulashify]

Looking from the outside, this is simple to fix here w/ either: a) adding !important to the enabled fit-content rules, or b) toggling between htw-h-full and htw-h-fit as needed. Not sure what other functionality that might break though.

See video here.

PR welcome?

[50rayn]

Hello @goulashify ,

Here is Contribution Guide to the Histoire. I suppose the PR is welcomed 🙂

[minddust]

quick-fix/workaround in case it's blocking your development like mine 😅

  div.htw-h-fit:has(> div.bind-preview-bg) {
    height: fit-content !important;
  }