git_ui: Layout/spacing tweaks for Blame tooltip (#40130)

Bartosz Kaszubowski and Danilo Leal created 2 months ago

# Why

Spotted that spacing of different Blame tooltip elements are spaced
uneven, also the fact that message content disappears on scroll before
reaching border felt a bit odd.

# How

Layout/spacing tweaks for Blame tooltip.

Release Notes:

- Improved appearance of Git Blame tooltip.

# Preview

### Before

<img width="1034" height="702" alt="Screenshot 2025-10-13 at 20 01 07"
src="https://github.com/user-attachments/assets/0c2715d5-d8fa-41dc-b891-a320a74d6fb0"
/>

<img width="1006" height="410" alt="Screenshot 2025-10-13 at 20 06 15"
src="https://github.com/user-attachments/assets/8c16f6dc-58e5-46cc-83fb-dd71a63e7557"
/>


### After

<img width="1034" height="672" alt="Screenshot 2025-10-13 at 20 00 33"
src="https://github.com/user-attachments/assets/e22e0e42-676e-411a-8773-2e57cdaaab17"
/>

<img width="1006" height="370" alt="Screenshot 2025-10-13 at 20 06 55"
src="https://github.com/user-attachments/assets/761995a9-153a-4e5d-923b-e7fbd73dc475"
/>

---------

Co-authored-by: Danilo Leal <[e-mail]>

Change summary

crates/git_ui/src/blame_ui.rs | 38 +++++++++++++++++-------------------
1 file changed, 18 insertions(+), 20 deletions(-)

Detailed changes

crates/git_ui/src/blame_ui.rs

@@ -17,7 +17,7 @@ use settings::Settings as _;
 use theme::ThemeSettings;
 use time::OffsetDateTime;
 use time_format::format_local_timestamp;
-use ui::{ContextMenu, Divider, IconButtonShape, prelude::*, tooltip_container};
+use ui::{ContextMenu, Divider, prelude::*, tooltip_container};
 use workspace::Workspace;
 
 const GIT_BLAME_MAX_AUTHOR_CHARS_DISPLAYED: usize = 20;
@@ -61,16 +61,15 @@ impl BlameRenderer for GitBlameRenderer {
                 .mr_2()
                 .child(
                     h_flex()
+                        .id(("blame", ix))
                         .w_full()
+                        .gap_2()
                         .justify_between()
                         .font_family(style.font().family)
                         .line_height(style.line_height)
-                        .id(("blame", ix))
                         .text_color(cx.theme().status().hint)
-                        .gap_2()
                         .child(
                             h_flex()
-                                .items_center()
                                 .gap_2()
                                 .child(div().text_color(sha_color).child(short_commit_id))
                                 .children(avatar)
@@ -250,20 +249,21 @@ impl BlameRenderer for GitBlameRenderer {
         };
 
         Some(
-            tooltip_container(cx, |d, cx| {
-                d.occlude()
+            tooltip_container(cx, |this, cx| {
+                this.occlude()
                     .on_mouse_move(|_, _, cx| cx.stop_propagation())
                     .on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())
                     .child(
                         v_flex()
                             .w(gpui::rems(30.))
-                            .gap_4()
                             .child(
                                 h_flex()
-                                    .pb_1p5()
-                                    .gap_x_2()
+                                    .pb_1()
+                                    .gap_2()
                                     .overflow_x_hidden()
                                     .flex_wrap()
+                                    .border_b_1()
+                                    .border_color(cx.theme().colors().border_variant)
                                     .children(avatar)
                                     .child(author)
                                     .when(!author_email.is_empty(), |this| {
@@ -272,30 +272,29 @@ impl BlameRenderer for GitBlameRenderer {
                                                 .text_color(cx.theme().colors().text_muted)
                                                 .child(author_email.to_owned()),
                                         )
-                                    })
-                                    .border_b_1()
-                                    .border_color(cx.theme().colors().border_variant),
+                                    }),
                             )
                             .child(
                                 div()
                                     .id("inline-blame-commit-message")
-                                    .child(message)
+                                    .track_scroll(&scroll_handle)
+                                    .py_1p5()
                                     .max_h(message_max_height)
                                     .overflow_y_scroll()
-                                    .track_scroll(&scroll_handle),
+                                    .child(message),
                             )
                             .child(
                                 h_flex()
                                     .text_color(cx.theme().colors().text_muted)
                                     .w_full()
                                     .justify_between()
-                                    .pt_1p5()
+                                    .pt_1()
                                     .border_t_1()
                                     .border_color(cx.theme().colors().border_variant)
                                     .child(absolute_timestamp)
                                     .child(
                                         h_flex()
-                                            .gap_1p5()
+                                            .gap_1()
                                             .when_some(pull_request, |this, pr| {
                                                 this.child(
                                                     Button::new(
@@ -306,24 +305,24 @@ impl BlameRenderer for GitBlameRenderer {
                                                     .icon(IconName::PullRequest)
                                                     .icon_color(Color::Muted)
                                                     .icon_position(IconPosition::Start)
-                                                    .style(ButtonStyle::Subtle)
+                                                    .icon_size(IconSize::Small)
                                                     .on_click(move |_, _, cx| {
                                                         cx.stop_propagation();
                                                         cx.open_url(pr.url.as_str())
                                                     }),
                                                 )
+                                                .child(Divider::vertical())
                                             })
-                                            .child(Divider::vertical())
                                             .child(
                                                 Button::new(
                                                     "commit-sha-button",
                                                     short_commit_id.clone(),
                                                 )
-                                                .style(ButtonStyle::Subtle)
                                                 .color(Color::Muted)
                                                 .icon(IconName::FileGit)
                                                 .icon_color(Color::Muted)
                                                 .icon_position(IconPosition::Start)
+                                                .icon_size(IconSize::Small)
                                                 .on_click(move |_, window, cx| {
                                                     CommitView::open(
                                                         commit_summary.clone(),
@@ -337,7 +336,6 @@ impl BlameRenderer for GitBlameRenderer {
                                             )
                                             .child(
                                                 IconButton::new("copy-sha-button", IconName::Copy)
-                                                    .shape(IconButtonShape::Square)
                                                     .icon_size(IconSize::Small)
                                                     .icon_color(Color::Muted)
                                                     .on_click(move |_, _, cx| {