git_ui: Prevent button overflow due to long names (#25940)

- Fix component preview widths for git panel
- Fix buttons getting pushed off the screen in git  panel

Release Notes:

- N/A

---------

Co-authored-by: Mikayla Maki <mikayla.c.maki@gmail.com>

crates/ui/src/components/button/button.rs

@@ -97,6 +97,7 @@ pub struct Button {
     key_binding: Option<KeyBinding>,
     key_binding_position: KeybindingPosition,
     alpha: Option<f32>,
+    truncate: bool,
 }
 
 impl Button {
@@ -123,6 +124,7 @@ impl Button {
             key_binding: None,
             key_binding_position: KeybindingPosition::default(),
             alpha: None,
+            truncate: false,
         }
     }
 
@@ -206,6 +208,15 @@ impl Button {
         self.alpha = Some(alpha);
         self
     }
+
+    /// Truncates overflowing labels with an ellipsis (`…`) if needed.
+    ///
+    /// Buttons with static labels should _never_ be truncated, ensure
+    /// this is only used when the label is dynamic and may overflow.
+    pub fn truncate(mut self, truncate: bool) -> Self {
+        self.truncate = truncate;
+        self
+    }
 }
 
 impl Toggleable for Button {
@@ -437,7 +448,8 @@ impl RenderOnce for Button {
                                 .color(label_color)
                                 .size(self.label_size.unwrap_or_default())
                                 .when_some(self.alpha, |this, alpha| this.alpha(alpha))
-                                .line_height_style(LineHeightStyle::UiLabel),
+                                .line_height_style(LineHeightStyle::UiLabel)
+                                .when(self.truncate, |this| this.truncate()),
                         )
                         .children(self.key_binding),
                 )

crates/ui/src/components/label/highlighted_label.rs

@@ -64,8 +64,8 @@ impl LabelCommon for HighlightedLabel {
         self
     }
 
-    fn text_ellipsis(mut self) -> Self {
-        self.base = self.base.text_ellipsis();
+    fn truncate(mut self) -> Self {
+        self.base = self.base.truncate();
         self
     }
 

crates/ui/src/components/label/label.rs

@@ -171,8 +171,9 @@ impl LabelCommon for Label {
         self
     }
 
-    fn text_ellipsis(mut self) -> Self {
-        self.base = self.base.text_ellipsis();
+    /// Truncates overflowing text with an ellipsis (`…`) if needed.
+    fn truncate(mut self) -> Self {
+        self.base = self.base.truncate();
         self
     }
 
@@ -240,7 +241,7 @@ mod label_preview {
                         "Special Cases",
                         vec![
                             single_example("Single Line", Label::new("Line 1\nLine 2\nLine 3").single_line().into_any_element()),
-                            single_example("Text Ellipsis", div().max_w_24().child(Label::new("This is a very long file name that should be truncated: very_long_file_name_with_many_words.rs").text_ellipsis()).into_any_element()),
+                            single_example("Text Ellipsis", div().max_w_24().child(Label::new("This is a very long file name that should be truncated: very_long_file_name_with_many_words.rs").truncate()).into_any_element()),
                         ],
                     ),
                 ])

crates/ui/src/components/label/label_like.rs

@@ -57,7 +57,7 @@ pub trait LabelCommon {
     fn alpha(self, alpha: f32) -> Self;
 
     /// Truncates overflowing text with an ellipsis (`…`) if needed.
-    fn text_ellipsis(self) -> Self;
+    fn truncate(self) -> Self;
 
     /// Sets the label to render as a single line.
     fn single_line(self) -> Self;
@@ -84,7 +84,7 @@ pub struct LabelLike {
     alpha: Option<f32>,
     underline: bool,
     single_line: bool,
-    text_ellipsis: bool,
+    truncate: bool,
 }
 
 impl Default for LabelLike {
@@ -109,7 +109,7 @@ impl LabelLike {
             alpha: None,
             underline: false,
             single_line: false,
-            text_ellipsis: false,
+            truncate: false,
         }
     }
 }
@@ -166,8 +166,9 @@ impl LabelCommon for LabelLike {
         self
     }
 
-    fn text_ellipsis(mut self) -> Self {
-        self.text_ellipsis = true;
+    /// Truncates overflowing text with an ellipsis (`…`) if needed.
+    fn truncate(mut self) -> Self {
+        self.truncate = true;
         self
     }
 
@@ -220,7 +221,7 @@ impl RenderOnce for LabelLike {
             })
             .when(self.strikethrough, |this| this.line_through())
             .when(self.single_line, |this| this.whitespace_nowrap())
-            .when(self.text_ellipsis, |this| {
+            .when(self.truncate, |this| {
                 this.overflow_x_hidden().text_ellipsis()
             })
             .text_color(color)