react-notion-x icon indicating copy to clipboard operation
react-notion-x copied to clipboard

Notion Asidebar Overflow Case

Open Gogeta999 opened this issue 3 years ago • 2 comments
trafficstars

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);
  }
}

Untitled

After i reduce to 2.2

solveAfter

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.

Gogeta999 avatar Dec 29 '21 17:12 Gogeta999

If anyone figures out a solution to this, please post it here or create a PR.

Thanks :)

transitive-bullshit avatar Mar 26 '22 09:03 transitive-bullshit

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.

songhanpoo avatar Jul 03 '23 08:07 songhanpoo