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.

Start by reproducing the layout with the @media rule and the .notion-page-content-has-aside, .notion-aside, and .notion-aside-table-of-contents selectors shown in the issue, including a customized left category area. Compare the sidebar width and overflow behavior with the table of contents while scrolling. Done means the sidebar no longer overflows and the table of contents retains its scroll and sticky behavior.