Notion table styling issues

zephyraft commented 3 years ago

render /Table - Inline and /Table - Full Page error，and cannot open page In tables

Links： Vercel Page - Inline Table Notion Page - Inline Table

Vercel Page - Full Table Notion Page - Full Table

zephyraft commented 3 years ago

Broswer: Chrome 88.0.4324.192 Github Repo: https://github.com/zephyrinzephyr/nextjs-notion-starter-kit

transitive-bullshit commented 3 years ago

Hey @zephyrinzephyr, thanks for the bug report. It's definitely an issue with react-notion-x.

Will look into it when I find some time.

zephyraft commented 3 years ago

Hey @zephyrinzephyr, thanks for the bug report. It's definitely an issue with react-notion-x.

Will look into it when I find some time.

Ok，thanks for your reply.

AntonioDEM commented 3 years ago

I believe this problem has not been solved

AntonioDEM commented 3 years ago

I have found a possible solution to the problem.

on /style/notion.css I added:

.notion-collection-column-title {
    -webkit-user-select: hidden;
    -ms-user-select: hidden;
    user-select: hidden;
    display: flex;
    align-items: center;
    margin-bottom: 1px;
    width: 100%;
    height: 100%;
    padding-left: 18px; /*sposta titoli colonne*/
    padding-right: 18px;
    border-right: 0px solid var(--fg-color-10);
    text-align: left;
    overflow: hidden
    /* justify-content: center; */
    /* border-radius: 14px;
    box-shadow: 1px 1px 1px 1px rgba(15, 15, 15, 0.1); */
  }

  .notion-collection-row-property .notion-property {
    -webkit-user-select: hidden;
    transition: background 20ms ease-in;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    width: 100%;
    min-height: 14px;
    padding: 6px 8px 7px;
    font-size: 14px;
    overflow: hidden;
  }

transitive-bullshit commented 2 years ago

This looks like a bug in react-notion-x which is maintained separately from this project (it's the underlying notion rendering engine).

Please open a corresponding issue over there.

Thanks for the report & sorry you're running into issues, but there are more maintainers of react-notion-x so hopefully it'll be solved over there.

transitive-bullshit / nextjs-notion-starter-kit

Notion table styling issues #62