Bug - Table - mobile layout breaks alters table cell content layout unexpectedly

Describe the problem

PF tables on mobile change the Td display from table-cell to grid. This has a side effect on mobile layout where every immediate child of the cell becomes a new grid item and gets stacked and elongated. The way to counteract this is to ensure that we always nest a <div> or some other block element immediately within the cell before adding our contents.

For example here’s what happens if we render a Label with adjacent Icon: eg <Td><Label> <Icon></Td>

How do you reproduce the problem?
Using web inspector on the Table examples found here: https://www.patternfly.org/components/table
When the window width is small enough to render the mobile view, observe the grid layout is applied and all table cell children become grid items.

Expected behavior
By default, the contents of the cell should render the same on desktop and mobile. The dev should need to go out of their way to opt into this other behavior.

Is this issue blocking you?
The work around is to always render a <div> as a the first immediate child of the table cell before rendering the cell contents within the div.

What is your environment?

• OS: macos
• Browser chrome
• Version latest

What is your product and what release date are you targeting?
RHOAI

Any other information?

Reproduce el problema en los ejemplos de PatternFly Table de la página del componente enlazada usando una ventana del navegador estrecha e inspecciona la disposición de Td. Empieza rastreando la implementación de Table/Td y su comportamiento en la cuadrícula móvil. Se considera completado cuando los contenidos de las celdas, como un Label y un Icon adyacentes, se renderizan de forma consistente en escritorio y móvil sin requerir que los consumidores añadan un wrapper.