Q :Is there any way to customize the OverlayCSUIContainer

[rohitrmenon]

What happened?

Is there any way to customise the OverlayCSUIContainer to position it to the bottom right of the anchor rather than the default top-left.

the below one is the static container generated on the dev environment, is there a way to directly style this in the content script?

Version

Latest

What OS are you seeing the problem on?

No response

What browsers are you seeing the problem on?

No response

Relevant log output

export const OverlayCSUIContainer = (props: PlasmoCSUIContainerProps) => {
  const [top, setTop] = React.useState(0)
  const [left, setLeft] = React.useState(0)

  React.useEffect(() => {
    // Handle overlay repositioning
    if (props.anchor.type !== "overlay") {
      return
    }

    const updatePosition = async () => {
      const rect = props.anchor.element?.getBoundingClientRect()
      if (!rect) {
        return
      }

      const pos = {
        left: rect.left + window.scrollX,
        top: rect.top+ window.scrollY
      }

      setLeft(pos.left)
      setTop(pos.top)
    }

    updatePosition()

    const unwatch = props.watchOverlayAnchor?.(updatePosition)
    window.addEventListener("scroll", updatePosition)
    window.addEventListener("resize", updatePosition)

    return () => {
      if (typeof unwatch === "function") {
        unwatch()
      }
      window.removeEventListener("scroll", updatePosition)
      window.removeEventListener("resize", updatePosition)
    }
  }, [props.anchor.element])

  return (
    <div
      id={props.id}
      className="plasmo-csui-container"
      style={{
        display: "flex",
        position: "absolute",
        top,
        left
      }}>
      {props.children}
    </div>
  )
}

(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.