gpui: Fix text ellipsis appearing even the flex element has space (#17149)

Release Notes:

- N/A

There was a calculation bug before. When we added `text_ellipsis` to the
flex element, it would always show ellipsis no matter how long it was.

Actually we can't use `flex` and `text_ellipsis` at same time, the CSS
also not support this. But this bug will let user confuse.

### Before

<img width="731" alt="image"
src="https://github.com/user-attachments/assets/b7d60017-6785-45f5-8b40-dd5efa154a1e">

### After

<img width="521" alt="image"
src="https://github.com/user-attachments/assets/a3117793-284e-48d4-8c15-059fe61abe60">
This commit is contained in:
Jason Lee
2024-08-30 09:01:46 -04:00
committed by GitHub
parent b62e63349b
commit 0835d456dc
2 changed files with 44 additions and 3 deletions
+30
View File
@@ -13,6 +13,36 @@ impl Render for HelloWorld {
.p_2()
.gap_2()
.bg(gpui::white())
.child(
div()
.flex()
.flex_row()
.gap_2()
.child(
div()
.flex()
.border_1()
.border_color(gpui::red())
.text_ellipsis()
.child("longer text in flex 1"),
)
.child(
div()
.flex()
.border_1()
.border_color(gpui::red())
.text_ellipsis()
.child("short flex"),
)
.child(
div()
.overflow_hidden()
.border_1()
.border_color(gpui::red())
.text_ellipsis()
.child("A short text in normal div"),
),
)
.child(
div()
.text_xl()