[bug]: Bottom padding issue Tabs flex wrap scenario

[ridhwaans]

Describe the bug

<div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
        <Tabs defaultValue="All">
          <TabsList className="flex flex-wrap pb-32">
            <TabsTrigger value="All">All</TabsTrigger>
            {itemsCollection.map((item) => (
              <TabsTrigger value={item.name as string}>{item.name}</TabsTrigger>
            ))}
          </TabsList>
          {genres.map((item) => (
            <TabsContent value={item.name as string}>
             /* content */
            </TabsContent>
          ))}
        </Tabs>
      </div>

in the above example, pb-32 is hardcoded because if there is a large tab collection, it breaks into two or more rows, then the background color & padding doesnt extend. If the viewport is resized to md & lower, it is more clear that the Tab component padding doesnt grow/shrink. TabsTrigger clips into below components

Affected component/components

Tabs, TabsContent, TabsList, TabsTrigger

How to reproduce

1. this may just be a client component issue
2. add flex flex-wrap to TabList
3. observe TabContent overlap in position with TabList

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Mac 14.4, Chrome (latest)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[Lavdewangan1]

Hi there, is this bug still up and can I work on it?