react-notion-x icon indicating copy to clipboard operation
react-notion-x copied to clipboard

fix and simplify iframe styles

Open Commandtechno opened this issue 2 years ago • 1 comments

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

Commandtechno avatar May 11 '22 22:05 Commandtechno

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)

vercel[bot] avatar May 11 '22 22:05 vercel[bot]