react-notion-x
react-notion-x copied to clipboard
Notion Icon aligned left.
trafficstars
Description
This is original notion page.

And then NotionRenderer result.

It caused by "left: 50%" in class "notion-page-icon-hero" at "react-notion-x/src/styles.css".
.notion-page-icon-hero {
position: absolute;
top: 0;
left: 50%;
display: flex;
flex-direction: row;
justify-content: center;
}
This is delete "left: 50%" result in browser.

Also "margin-left: -39px" in class ".notion-page-icon-hero.notion-page-icon-span " too problem.
.notion-page-icon-hero.notion-page-icon-span {
height: 78px;
width: 78px;
margin-left: -39px;
}
This is delete "margin-left: -39px" result in browser.

Notion Test Page ID
Page ID: https://www.notion.so/React-Notion-X-List-Test-8cd35eb807b247f68d92d13238112a59
Hey @EC-Sol 👋
Yeah, this is definitely something we should change to match the default notion behavior.
I think I had it this way because it's what I wanted for my blog 😂 but that should belong elsewhere.