react-notion-x
react-notion-x copied to clipboard
Notion Asidebar Overflow Case
When i implement react-notion-x to my website,asidebar become oveflow and i need to reduce value in this code ~~width: calc((100vw + var(--notion-max-width)) / 2);~~ width: calc((100vw + var(--notion-max-width)) / 2.2);
Here is code
@media (min-width: 1300px) and (min-height: 300px) {
.notion-page-content-has-aside {
display: flex;
flex-direction: row;
width: calc((100vw + var(--notion-max-width)) / 2.2);
}
.notion-page-content-has-aside .notion-aside {
display: flex;
}
.notion-page-content-has-aside .notion-page-content-inner {
width: var(--notion-max-width);
max-width: var(--notion-max-width);
}
}

After i reduce to 2.2

ALSO can't hidden overflow with overflow: hidden
Althought this will hidden overflow case from parent but this gonna affect Table Of Content Effect, TOC not gonna follow with y axis scroll and no sticky on right too
.notion-aside-table-of-contents {
display: flex;
flex-direction: column;
align-items: center;
max-height: calc(100vh - 148px - 16px);
overflow: hidden auto;
min-width: 222px;
overflow: auto;
}
Is there any better solution for this?
Btw this case cause when i added customize categories at left side.
If anyone figures out a solution to this, please post it here or create a PR.
Thanks :)
it was happened with me. just check one by one parent of <aside ...> and then make sure don't have any overflow:hidden that's should be overflow:visible. it had been happen in src. we don't need to raise PR for fixing.