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?

Tái hiện vấn đề trong các ví dụ PatternFly Table trên trang component được liên kết bằng một cửa sổ trình duyệt hẹp và kiểm tra layout của Td. Bắt đầu bằng cách lần theo phần triển khai của Table/Td và hành vi grid trên mobile. Được xem là hoàn tất khi nội dung ô, chẳng hạn như Label và Icon liền kề, được render nhất quán trên desktop và mobile mà không yêu cầu phía sử dụng phải thêm một wrapper.