gpui: Revert grid template columns default behavior to align with Tailwind (#44368)
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
This commit is contained in:
@@ -8,7 +8,6 @@ use std::{fmt::Debug, ops::Range};
|
||||
use taffy::{
|
||||
TaffyTree, TraversePartialTree as _,
|
||||
geometry::{Point as TaffyPoint, Rect as TaffyRect, Size as TaffySize},
|
||||
prelude::min_content,
|
||||
style::AvailableSpace as TaffyAvailableSpace,
|
||||
tree::NodeId,
|
||||
};
|
||||
@@ -296,7 +295,7 @@ trait ToTaffy<Output> {
|
||||
|
||||
impl ToTaffy<taffy::style::Style> for Style {
|
||||
fn to_taffy(&self, rem_size: Pixels, scale_factor: f32) -> taffy::style::Style {
|
||||
use taffy::style_helpers::{length, minmax, repeat};
|
||||
use taffy::style_helpers::{fr, length, minmax, repeat};
|
||||
|
||||
fn to_grid_line(
|
||||
placement: &Range<crate::GridPlacement>,
|
||||
@@ -310,8 +309,8 @@ impl ToTaffy<taffy::style::Style> for Style {
|
||||
fn to_grid_repeat<T: taffy::style::CheapCloneStr>(
|
||||
unit: &Option<u16>,
|
||||
) -> Vec<taffy::GridTemplateComponent<T>> {
|
||||
// grid-template-columns: repeat(<number>, minmax(0, min-content));
|
||||
unit.map(|count| vec![repeat(count, vec![minmax(length(0.0), min_content())])])
|
||||
// grid-template-columns: repeat(<number>, minmax(0, 1fr));
|
||||
unit.map(|count| vec![repeat(count, vec![minmax(length(0.0), fr(1.0))])])
|
||||
.unwrap_or_default()
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user