Issue with PlasmoCSUI h-full not functioning properly
I'm having trouble getting my custom button to align correctly with a row of buttons on Twitter. Despite using the h-full attribute, my element isn't filling the parent node as expected. Has anyone encountered this issue before?
Refer to the code snippet below:
import cssText from "data-text:~style.css"
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"
export const getStyle = () => {
const style = document.createElement("style")
style.textContent = cssText.replaceAll(":root", ":host")
return style
}
export const config: PlasmoCSConfig = {
matches: ["*://*.x.com/*", "*://*.twitter.com/*"]
}
export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
const elements = document.querySelectorAll('[role="tablist"]:last-child')
return Array.from(elements).map((el) => ({
element: el,
insertPosition: "beforeend"
}))
}
const PlasmoCSUI = () => {
return (
<div className="my-auto flex items-center justify-center" style={{ height: 'var(--twitter-tab-height)' }}>
<div className="my-auto w-9 h-full flex items-center justify-center ml-1 bg-red-500">
tag
</div>
</div>
)
}
export default PlasmoCSUI