When using the latest version of `GPUI`, I found some grid layout
issues. I discovered #43555 modified the default behavior of grid
template columns. I checked the implementation at
https://tailwindcss.com/docs/grid-template-columns, and it seems our
previous implementation was correct.
If a grid layout is placed inside a flexbox, the layout becomes
unpredictable.
```rust
impl Render for HelloWorld {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
div()
.flex()
.size(px(500.0))
.bg(rgb(0x505050))
.text_xl()
.text_color(rgb(0xffffff))
.child(
div()
.size_full()
.gap_1()
.grid()
.grid_cols(2)
.border_1()
.border_color(gpui::red())
.children((0..10).map(|ix| {
div()
.w_full()
.border_1()
.border_color(gpui::green())
.child(ix.to_string())
})),
)
}
}
```
| Before | After |
| - | - |
| <img width="612" height="644" alt="After1"
src="https://github.com/user-attachments/assets/64eaf949-0f38-4f0b-aae7-6637f8f40038"
/> | <img width="612" height="644" alt="Before1"
src="https://github.com/user-attachments/assets/561a508d-29ea-4fd2-bd1e-909ad14b9ee3"
/> |
I also placed the grid layout example inside a flexbox too.
| Before | After |
| - | - |
| <img width="612" height="644" alt="After"
src="https://github.com/user-attachments/assets/fa6f4a2d-21d8-413e-8b66-7bd073e05f87"
/> | <img width="612" height="644" alt="Before"
src="https://github.com/user-attachments/assets/9e0783d1-18e9-470d-b913-0dbe4ba88835"
/> |
I tested the changes from the previous PR, and it seems that setting the
table's parent to `v_flex` is sufficient to achieve a non-full table
width without modifying the grid layout. This was already done in the
previous PR.
I reverted the grid changes, the blue border represents the table width.
cc @RemcoSmitsDev
<img width="1107" height="1000" alt="table"
src="https://github.com/user-attachments/assets/4b7ba2a2-a66a-444d-ad42-d80bc9057cce"
/>
So, I believe we should revert to this implementation to align with
tailwindcss behavior and avoid potential future problems, especially
since the cause of this issue is difficult to pinpoint.
Release Notes:
- N/A
Floyd Wang
bc17491527