[BUG] - Card's shadow cut off when nested inside ListBoxItem

[kui04]

NextUI Version

2.4.2

Describe the bug

The shadow of a Card component nested inside a ListBoxItem is cut off. The overflow: hidden property in the truncate class appears to be causing this issue.

Notice the corner of the Card

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a new project
2. Add listbox and card
3. App.tsx

import { Card, CardBody, CardHeader } from "@nextui-org/card";
import { Listbox, ListboxItem } from "@nextui-org/listbox";

function App() {
  return (
    <Listbox aria-label="test">
      <ListboxItem key="test" textValue="test">
        <Card shadow="lg">
          <CardHeader>header</CardHeader>
          <CardBody>body</CardBody>
        </Card>
      </ListboxItem>
    </Listbox>
  );
}

export default App;

Expected behavior

The shadow of the Card should be fully visible and not cut off when nested inside a ListBoxItem.

Screenshots or Videos

shadow is cut off

after change overflow:hidden to overflow:visible

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-1148 [BUG] - Card's shadow cut off when nested inside ListBoxItem

[awesome-pro]

@kui04 in which component did you change the overflow . can you provide stackblitz or codesandbox for better explanation

[kui04]

@kui04 in which component did you change the overflow . can you provide stackblitz or codesandbox for better explanation

I create a codesandbox here with some explanations
It's a span inside the li.