fix: Fix collection list view hydration (remove invalid <a> tag nesting)

[ryngonzalez]

trafficstars

Description

react-notion-x, when rendering a CollectionViewList row, in the Collection component, nests two <a> tags within each other, which is invalid HTML (fixes #492).

When used with a next.js project, this causes a hydration error (fixes #410).

This PR makes the following changes to fix this:

• linkToTitlePage on the Property component used in a CollectionViewList is set to false to prevent a nested <a> tag in the row's root element.
• With the non-nesting occurring, .notion-list-item-title is updated to have a text-decoration: underline to match .notion-link. Some new CSS variables are added to support this.
• .notion-list-item-property is updated to vertically align it's content, as it is in Notion.
• Some CSS formatting is fixed.

Notion Test Page ID

Test idea for a page with a Collection List View is here: 0260a95744a64f4ca67456420761be24

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-notion-x	✅ Ready (Inspect)	Visit Preview	Jul 9, 2023 6:31am
react-notion-x-minimal-demo	✅ Ready (Inspect)	Visit Preview	Jul 9, 2023 6:31am

[rimonhanna]

@transitive-bullshit