Pick content shows boxes even if content is covered by other elements

[isakgb]

When Pick content is enabled, and you have some val content that is covered by another element such as a modal, boxes will still appear around the non-visible content.

Steps to reproduce:

Create a new val project with any project name:

npm create @valbuild

cd my-val-app

Edit the src/app/page.tsx file and in the Home function:

Replace this:

<main className="max-w-screen-lg mx-auto p-4">
  {pageContent.sections.map((section) => (
    <Section key={section.type} section={section} />
  ))}
</main>

With this:

<main className="max-w-screen-lg mx-auto p-4">
  {pageContent.sections.map((section) => (
    <Section key={section.type} section={section} />
  ))}
  <div className="fixed flex inset-0 bg-black/50">
    <div className="m-auto p-32 bg-gray-700">{pageContent.description}</div>
  </div>
</main>

• Start the project: npm run dev
• Go to http://localhost:3000/val
• Click enter preview mode.
• Click Pick content

The result should be something like this: