keymap editor: Refine how we display matching keystrokes (#35796)

Danilo Leal created

| Before | After |
|--------|--------|
| <img width="1092" height="528" alt="CleanShot 2025-08-07 at 10  54
42@2x"
src="https://github.com/user-attachments/assets/8b0a3b50-e1d1-4763-824c-2b419df430fc"
/> | <img width="1096" height="580" alt="CleanShot 2025-08-07 at 11  29
47@2x"
src="https://github.com/user-attachments/assets/bd484655-90a6-46fe-91ef-c9c8d2ab93bc"
/> |

Release Notes:

- N/A

Change summary

crates/settings_ui/src/keybindings.rs                   | 100 ++++++----
crates/settings_ui/src/ui_components/keystroke_input.rs |   2 
crates/ui_input/src/ui_input.rs                         |   2 
3 files changed, 59 insertions(+), 45 deletions(-)

Detailed changes

crates/settings_ui/src/keybindings.rs 🔗

@@ -2415,6 +2415,7 @@ impl Render for KeybindingEditorModal {
                     .header(
                         ModalHeader::new().child(
                             v_flex()
+                                .w_full()
                                 .pb_1p5()
                                 .mb_1()
                                 .gap_0p5()
@@ -2438,17 +2439,55 @@ impl Render for KeybindingEditorModal {
                     .section(
                         Section::new().child(
                             v_flex()
-                                .gap_2()
+                                .gap_2p5()
                                 .child(
                                     v_flex()
-                                        .child(Label::new("Edit Keystroke"))
                                         .gap_1()
-                                        .child(self.keybind_editor.clone()),
+                                        .child(Label::new("Edit Keystroke"))
+                                        .child(self.keybind_editor.clone())
+                                        .child(h_flex().gap_px().when(
+                                            matching_bindings_count > 0,
+                                            |this| {
+                                                let label = format!(
+                                                    "There {} {} {} with the same keystrokes.",
+                                                    if matching_bindings_count == 1 {
+                                                        "is"
+                                                    } else {
+                                                        "are"
+                                                    },
+                                                    matching_bindings_count,
+                                                    if matching_bindings_count == 1 {
+                                                        "binding"
+                                                    } else {
+                                                        "bindings"
+                                                    }
+                                                );
+
+                                                this.child(
+                                                    Label::new(label)
+                                                        .size(LabelSize::Small)
+                                                        .color(Color::Muted),
+                                                )
+                                                .child(
+                                                    Button::new("show_matching", "View")
+                                                        .label_size(LabelSize::Small)
+                                                        .icon(IconName::ArrowUpRight)
+                                                        .icon_color(Color::Muted)
+                                                        .icon_size(IconSize::XSmall)
+                                                        .on_click(cx.listener(
+                                                            |this, _, window, cx| {
+                                                                this.show_matching_bindings(
+                                                                    window, cx,
+                                                                );
+                                                            },
+                                                        )),
+                                                )
+                                            },
+                                        )),
                                 )
                                 .when_some(self.action_arguments_editor.clone(), |this, editor| {
                                     this.child(
                                         v_flex()
-                                            .mt_1p5()
                                             .gap_1()
                                             .child(Label::new("Edit Arguments"))
                                             .child(editor),
@@ -2459,50 +2498,25 @@ impl Render for KeybindingEditorModal {
                                     this.child(
                                         Banner::new()
                                             .severity(error.severity)
-                                            // For some reason, the div overflows its container to the
-                                            //right. The padding accounts for that.
-                                            .child(
-                                                div()
-                                                    .size_full()
-                                                    .pr_2()
-                                                    .child(Label::new(error.content.clone())),
-                                            ),
+                                            .child(Label::new(error.content.clone())),
                                     )
                                 }),
                         ),
                     )
                     .footer(
-                        ModalFooter::new()
-                            .start_slot(
-                                div().when(matching_bindings_count > 0, |this| {
-                                    this.child(
-                                        Button::new("show_matching", format!(
-                                            "There {} {} {} with the same keystrokes. Click to view",
-                                            if matching_bindings_count == 1 { "is" } else { "are" },
-                                            matching_bindings_count,
-                                            if matching_bindings_count == 1 { "binding" } else { "bindings" }
-                                        ))
-                                        .style(ButtonStyle::Transparent)
-                                        .color(Color::Accent)
-                                        .on_click(cx.listener(|this, _, window, cx| {
-                                            this.show_matching_bindings(window, cx);
-                                        }))
-                                    )
-                                })
-                            )
-                            .end_slot(
-                                h_flex()
-                                    .gap_1()
-                                    .child(
-                                        Button::new("cancel", "Cancel")
-                                            .on_click(cx.listener(|_, _, _, cx| cx.emit(DismissEvent))),
-                                    )
-                                    .child(Button::new("save-btn", "Save").on_click(cx.listener(
-                                        |this, _event, _window, cx| {
-                                            this.save_or_display_error(cx);
-                                        },
-                                    ))),
-                            ),
+                        ModalFooter::new().end_slot(
+                            h_flex()
+                                .gap_1()
+                                .child(
+                                    Button::new("cancel", "Cancel")
+                                        .on_click(cx.listener(|_, _, _, cx| cx.emit(DismissEvent))),
+                                )
+                                .child(Button::new("save-btn", "Save").on_click(cx.listener(
+                                    |this, _event, _window, cx| {
+                                        this.save_or_display_error(cx);
+                                    },
+                                ))),
+                        ),
                     ),
             )
     }

crates/ui_input/src/ui_input.rs 🔗

@@ -168,7 +168,7 @@ impl Render for SingleLineInput {
                     .py_1p5()
                     .flex_grow()
                     .text_color(style.text_color)
-                    .rounded_lg()
+                    .rounded_sm()
                     .bg(style.background_color)
                     .border_1()
                     .border_color(style.border_color)