Issue with CSUI sidebar resizing elements on certain websites while using Plasmo to develop a browser extension

[gantrol]

I am developing a browser extension using Plasmo, specifically the CSUI framework, and have noticed that the sidebar it inserts can cause elements on certain websites to appear either smaller or larger than normal. Has anyone else experienced this issue and found a solution for it? Thank you in advance for any help or suggestions.

Here is my code repo

show cases:

• left: normal case at github;
• right: Larger than normal at https://yiyan.baidu.com/ ;
  

[louisgv]

This line is the culprit:

https://github.com/gantrol/SecretaryGPT/blob/main/contents/Sidebar.svelte#L5

You will need to configure the output of that CSS to contain just base style and CSS variable from TW

[gantrol]

Thank you for your suggestion, it actually solved another issue I was having. However, the problem I originally reported still persists. I have already pushed the code changes that were discussed earlier.

Here is the modified sidebar-base.css:

@tailwind base;

:root,
#secretaire-sidebar:host {
  --sidebar-width: 420px;
}

body.secretaire-sidebar-show,
body.secretaire-sidebar-show * {
  max-width: calc(100vw - var(--sidebar-width));
  min-width: var(--sidebar-width);
}

#secretaire-sidebar {
  position: fixed;
  z-index: 999999;
  top: 0;
  right: 0;
}

If I modified it to only have @tailwind base;, the problem still exists.