Content overflows narrow (mobile width) screens by 32px

[MartinXPN]

Description

Seems like notion pages overflow narrow screens to the right by 32px. This seems to be caused by paddings that don't take into account the small screen size:

.notion-page {
    width: var(--notion-max-width);
    padding-left: calc(min(16px, 8vw));
    padding-right: calc(min(16px, 8vw));
    margin: 0 auto;
}

.root {
    --notion-max-width: 720px;
}

[transitive-bullshit]

Can you provide a reproducible example or screenshot + device info?

We're using box-sizing: border-box, so this should work fine and has been tested on mobile safari, for instance.

[MartinXPN]

I just created a codesandbox example: https://codesandbox.io/s/react-notion-x-overflow-example-8sebh3

If you open the preview on a separate page you can see that there is no horizontal scrollbar if the page is big enough (>720px). If you resize the page to a narrower width, a scrollbar appears.

[transitive-bullshit]

Thanks for the excellent repro, Martin 🙏

I was assuming that applications were applying * { box-sizing: border-box; }, but it's probably much better to define this in our stylesheet to guarantee it.

Just updated in react-notion-x@6.12.10.

[MartinXPN]

Awesome! Thanks!