Skip to content

Notion Asidebar Overflow Case #186

Open
@Gogeta999

Description

@Gogeta999

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions