Box-shadows are being cut off

Describe the bug

When rendering a component that has a box-shadow, that box-shadow is being cut off.

I was able to reproduce this on the following layouts: grid, single with or without iframe.

In the reproduction, clicking the button will add a “focus-ring”, which is a box-shadow. As you’ll probably be able to see, the focus-ring is partly cut off.

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-hktpv8?file=src/BaseButton.story.vue

System Info

System:
    OS: macOS 13.0
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 974.03 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/Library/Caches/fnm_multishells/16781_1666724779748/bin/node
    Yarn: 1.22.15 - ~/Library/Caches/fnm_multishells/16781_1666724779748/bin/yarn
    npm: 8.5.0 - ~/Library/Caches/fnm_multishells/16781_1666724779748/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 106.0.1
    Firefox Developer Edition: 103.0
    Safari: 16.1
  npmPackages:
    @histoire/plugin-nuxt: ^0.11.5 => 0.11.5 
    @histoire/plugin-vue: ^0.11.5 => 0.11.5 
    histoire: ^0.11.5 => 0.11.5 
    vite: ^3.1.8 => 3.1.8

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[jfitzsimmons2]

@nhedger I added this to my custom Histoire css so I could see my focus styles/shadows.

.histoire-generic-render-story {
    padding: .5rem;
}

[daguitosama]

There is not just about shadows

I have noticed there is not just shadows being cut off, it’s the actual component, I have solved the issue with the solution above, but i think will be nice to investigate why is this happening . Look additional captures to see how it behaves with borders and even simple text content. This is the repo if some one would like to take a look , can check out the MainHeadign story for instance (last capture).

A component with borders (No historie.css hack)

A component with borders (historie.css hack enabled)

A h1 being cutt off