From 5fb0cdfb15a2cb162a5ebe446c5da054ae0747a6 Mon Sep 17 00:00:00 2001 From: Zak Nesler Date: Fri, 3 Jul 2026 11:19:49 -0400 Subject: [PATCH] Improve commit container at larger font sizes (#60331) At larger font sizes (e.g. I have profiles that increase the font sizes when screen sharing) the commit button in the git panel editor does not stay aligned to the bottom-right of the screen, and overlaps the other elements:
Click to show showcase https://github.com/user-attachments/assets/e73034db-07a6-42d7-b993-9d8091e50b70 Notice the extra clipping of the commit message editor element: image
This was happening because the floating icons on the right and the footer containing the commit button were positioned absolutely, used pixels instead of responsive rems, and had an offset that was calculated and did not account for changes in user rem size. So I've moved things around to be more "flexy"... basically just removing the absolute positioning and making the elements flush against one another. ## Testing I have tested this manually on macOS 27 beta 2 and Windows 11, both using various light/dark themes, window sizes, commit text, etc. ## Self-Review Checklist: - [x] I've reviewed my own diff for quality, security, and reliability - [x] Unsafe blocks (if any) have justifying comments - [x] The content adheres to Zed's UI standards ([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist) and [icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md) guidelines) - [ ] ~~Tests cover the new/changed behavior~~ - [x] Performance impact has been considered and is acceptable ## Showcase Here's a demo at different zoom levels, with and without text, when expanding the commit window, etc.
Click to view showcase https://github.com/user-attachments/assets/bea82da1-0c7f-4d51-a73b-d4bc4581a2b7 And here's another demo with debug colors for the different elements to see what's going on: https://github.com/user-attachments/assets/12fd3e95-5089-4e34-a84c-c352219ee197
--- Release Notes: - Git Panel: Fixed overlapping elements in commit message container --------- Co-authored-by: zed-zippy[bot] <234243425+zed-zippy[bot]@users.noreply.github.com> Co-authored-by: Danilo Leal --- crates/git_ui/src/git_panel.rs | 174 +++++++++++++++------------------ 1 file changed, 77 insertions(+), 97 deletions(-) diff --git a/crates/git_ui/src/git_panel.rs b/crates/git_ui/src/git_panel.rs index 445b991a13..f7b36a9fc9 100644 --- a/crates/git_ui/src/git_panel.rs +++ b/crates/git_ui/src/git_panel.rs @@ -5169,14 +5169,6 @@ impl GitPanel { let branch = active_repository.read(cx).branch.clone(); let head_commit = active_repository.read(cx).head_commit.clone(); - let footer_size = px(32.); - let gap = px(9.0); - let max_height = panel_editor_style - .text - .line_height_in_pixels(window.rem_size()) - * MAX_PANEL_EDITOR_LINES - + gap; - let git_panel = cx.entity(); let display_name = SharedString::from(Arc::from( active_repository @@ -5200,6 +5192,58 @@ impl GitPanel { false }; + let vertical_buttons = v_flex() + .h_full() + .gap_px() + .p_1p5() + .opacity(0.6) + .hover(|s| s.opacity(1.0)) + .child( + IconButton::new("expand-commit-editor", IconName::MaximizeAlt) + .icon_size(IconSize::Small) + .tooltip({ + move |_window, cx| { + Tooltip::for_action_in( + "Open Commit Modal", + &git::ExpandCommitEditor, + &editor_focus_handle, + cx, + ) + } + }) + .on_click(cx.listener({ + move |_, _, window, cx| { + window.dispatch_action(git::ExpandCommitEditor.boxed_clone(), cx) + } + })), + ) + .child({ + let (icon, label) = if self.commit_editor_expanded { + (IconName::Minimize, "Collapse Commit Editor") + } else { + (IconName::Maximize, "Expand Commit Editor") + }; + let focus_handle = self.focus_handle.clone(); + + IconButton::new("fill-commit-editor", icon) + .icon_size(IconSize::Small) + .tooltip({ + move |_window, cx| { + Tooltip::for_action_in( + label, + &git::ToggleFillCommitEditor, + &focus_handle, + cx, + ) + } + }) + .on_click(cx.listener({ + move |_, _, window, cx| { + window.dispatch_action(git::ToggleFillCommitEditor.boxed_clone(), cx) + } + })) + }); + let footer = v_flex() .when(self.commit_editor_expanded, |this| this.flex_1().min_h_0()) .child(PanelRepoFooter::new( @@ -5233,13 +5277,8 @@ impl GitPanel { .child( panel_editor_container(window, cx) .id("commit-editor-container") - .cursor_text() - .relative() .w_full() .when(self.commit_editor_expanded, |this| this.flex_1().min_h_0()) - .when(!self.commit_editor_expanded, |this| { - this.h(max_height + footer_size) - }) .border_t_1() .border_color(if title_exceeds_limit { cx.theme().status().warning_border @@ -5249,20 +5288,37 @@ impl GitPanel { .on_click(cx.listener(move |this, _: &ClickEvent, window, cx| { window.focus(&this.commit_editor.focus_handle(cx), cx); })) + .child( + h_flex() + .size_full() + .child( + div() + .pt_2() + .px_2() + .cursor_text() + .flex_grow_1() + .on_action(|&zed_actions::editor::MoveUp, _, cx| { + cx.stop_propagation(); + }) + .on_action(|&zed_actions::editor::MoveDown, _, cx| { + cx.stop_propagation(); + }) + .child(EditorElement::new( + &self.commit_editor, + panel_editor_style, + )), + ) + .child(vertical_buttons), + ) .child( h_flex() .id("commit-footer") + .w_full() + .p_1p5() .border_t_1() .when(editor_is_long, |el| { el.border_color(cx.theme().colors().border_variant) }) - .absolute() - .bottom_0() - .left_0() - .w_full() - .px_2() - .h(footer_size) - .flex_none() .justify_between() .child( self.render_generate_commit_message_button(cx) @@ -5274,80 +5330,6 @@ impl GitPanel { .children(enable_coauthors) .child(self.render_commit_button(cx)), ), - ) - .child( - div() - .when(self.commit_editor_expanded, |this| { - this.flex_1().min_h_0().pb(footer_size) - }) - .pr_2p5() - .on_action(|&zed_actions::editor::MoveUp, _, cx| { - cx.stop_propagation(); - }) - .on_action(|&zed_actions::editor::MoveDown, _, cx| { - cx.stop_propagation(); - }) - .child(EditorElement::new(&self.commit_editor, panel_editor_style)), - ) - .child( - v_flex() - .absolute() - .top_2() - .right_2() - .gap_px() - .opacity(0.6) - .hover(|s| s.opacity(1.0)) - .child( - IconButton::new("expand-commit-editor", IconName::MaximizeAlt) - .icon_size(IconSize::Small) - .tooltip({ - move |_window, cx| { - Tooltip::for_action_in( - "Open Commit Modal", - &git::ExpandCommitEditor, - &editor_focus_handle, - cx, - ) - } - }) - .on_click(cx.listener({ - move |_, _, window, cx| { - window.dispatch_action( - git::ExpandCommitEditor.boxed_clone(), - cx, - ) - } - })), - ) - .child({ - let (icon, label) = if self.commit_editor_expanded { - (IconName::Minimize, "Collapse Commit Editor") - } else { - (IconName::Maximize, "Expand Commit Editor") - }; - let focus_handle = self.focus_handle.clone(); - - IconButton::new("fill-commit-editor", icon) - .icon_size(IconSize::Small) - .tooltip({ - move |_window, cx| { - Tooltip::for_action_in( - label, - &git::ToggleFillCommitEditor, - &focus_handle, - cx, - ) - } - }) - .on_click(cx.listener({ - move |_, _, window, cx| { - window.dispatch_action( - git::ToggleFillCommitEditor.boxed_clone(), - cx, - ) - } - })) - }), ), ); @@ -7468,8 +7450,6 @@ impl PanelHeader for GitPanel {} pub fn panel_editor_container(_window: &mut Window, cx: &mut App) -> Div { v_flex() .size_full() - .gap(px(8.)) - .p_2() .bg(cx.theme().colors().editor_background) } @@ -7689,9 +7669,9 @@ impl RenderOnce for PanelRepoFooter { }); h_flex() - .h_9() .w_full() .px_2() + .py_1p5() .justify_between() .gap_1() .child(