react-notion-x
react-notion-x copied to clipboard
fix and simplify iframe styles
Description
Removes random white background on iframes which is visible in dark mode
Fixes weird sizing/padding issues with iframes on https://react-notion-x-demo.transitivebullsh.it/5d4e290ca4604d8fb809af806a6c1749, especially on mobile. These changes apply a 100px
padding on either side like how notion does it. For regular sized iframes, they just fill their container because of the min-width: 100%
.
Re https://github.com/NotionX/react-notion-x/pull/285#discussion_r869735804: This removes the need for .notion-asset-wrapper-full
because https://github.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/components/asset.tsx#L62-L66 extends full width embeds like the figma one, and https://github.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/components/asset.tsx#L90-L92 for embeds with a defined width like the spotify podcast one. The 100px
padding still applies from the parent element (notion-asset-wrapper
).
Notion Test Page ID
5d4e290ca4604d8fb809af806a6c1749
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Updated |
---|---|---|---|
react-notion-x | ✅ Ready (Inspect) | Visit Preview | May 11, 2022 at 11:02PM (UTC) |
react-notion-x-minimal-demo | ✅ Ready (Inspect) | Visit Preview | May 11, 2022 at 11:02PM (UTC) |