[BUG] Content script overlay UI appears smaller on some pages

[lucky-bai]

What happened?

I am experiencing a bug with the content script UI that causes it to appear smaller than intended on some pages, notably linkedin.com. Steps to reproduce:

1. In the examples/with-content-scripts-ui, make the plasmo-overlay.tsx inject into all URLs.
2. Then navigate to LinkedIn.com (any page).

Expected: On most pages (eg: gmail), it looks like this:

However, on LinkedIn, it appears smaller:

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• [ ] I would like to fix this BUG via a PR

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[fran-veiras]

did you find any solution? I have the same bug...

[naan]

I had a similar problem where it appears bigger on some pages and it was caused by Root Container Style from the website. The issue is described here: https://docs.plasmo.com/framework/content-scripts-ui/styling#root-container-style

To avoid this, I ended up inserting <iframe> instead of <div> for all of my CSUI, something like the following:

import Frame from "react-frame-component"

export default MyCSUI({content}) {
    ...
    return (
        <Frame>
        <div>
           {content}
        </div>
        </Frame>
    )
}

I don't know what other way to workaround this. The document says override some CSS property with !important but it didn't work if the root container style sets something like font-size.