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

[christianvogt]

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?