Add more refinements to the keymap edit UI (#33847)

Quick follow-up to https://github.com/zed-industries/zed/pull/33816,
tidying it up some things a bit more.

Release Notes:

- N/A

crates/settings_ui/src/keybindings.rs

@@ -588,6 +588,8 @@ impl Render for KeymapEditor {
         let theme = cx.theme();
 
         v_flex()
+            .id("keymap-editor")
+            .track_focus(&self.focus_handle)
             .key_context(self.dispatch_context(window, cx))
             .on_action(cx.listener(Self::select_next))
             .on_action(cx.listener(Self::select_previous))
@@ -599,12 +601,9 @@ impl Render for KeymapEditor {
             .on_action(cx.listener(Self::copy_action_to_clipboard))
             .on_action(cx.listener(Self::copy_context_to_clipboard))
             .size_full()
+            .p_2()
+            .gap_1()
             .bg(theme.colors().editor_background)
-            .id("keymap-editor")
-            .track_focus(&self.focus_handle)
-            .pt_4()
-            .px_4()
-            .gap_4()
             .child(
                 h_flex()
                     .key_context({
@@ -796,15 +795,20 @@ impl Render for KeybindingEditorModal {
         let theme = cx.theme().colors();
 
         return v_flex()
-            .w(rems(36.))
+            .w(rems(34.))
             .elevation_3(cx)
             .child(
                 v_flex()
-                    .pt_2()
+                    .p_3()
-                    .px_4()
-                    .pb_4()
                     .gap_2()
-                    .child(Label::new("Input desired keystroke, then hit save"))
+                    .child(
+                        v_flex().child(Label::new("Edit Keystroke")).child(
+                            Label::new(
+                                "Input the desired keystroke for the selected action and hit save.",
+                            )
+                            .color(Color::Muted),
+                        ),
+                    )
                     .child(self.keybind_editor.clone()),
             )
             .child(
@@ -819,8 +823,7 @@ impl Render for KeybindingEditorModal {
                         Button::new("cancel", "Cancel")
                             .on_click(cx.listener(|_, _, _, cx| cx.emit(DismissEvent))),
                     )
-                    .child(
+                    .child(Button::new("save-btn", "Save").on_click(cx.listener(
-                        Button::new("save-btn", "Save Keybinding").on_click(cx.listener(
                         |this, _event, _window, cx| {
                             let existing_keybind = this.editing_keybind.clone();
                             let fs = this.fs.clone();
@@ -832,8 +835,7 @@ impl Render for KeybindingEditorModal {
                                 cx.notify();
                                 return;
                             }
-                                let tab_size =
+                            let tab_size = cx.global::<settings::SettingsStore>().json_tab_size();
-                                    cx.global::<settings::SettingsStore>().json_tab_size();
                             cx.spawn(async move |this, cx| {
                                 if let Err(err) = save_keybinding_update(
                                     existing_keybind,
@@ -852,8 +854,7 @@ impl Render for KeybindingEditorModal {
                             })
                             .detach();
                         },
-                        )),
+                    ))),
-                    ),
             )
             .when_some(self.error.clone(), |this, error| {
                 this.child(

crates/settings_ui/src/ui_components/table.rs

@@ -2,9 +2,9 @@ use std::{ops::Range, rc::Rc, time::Duration};
 
 use editor::{EditorSettings, ShowScrollbar, scroll::ScrollbarAutoHide};
 use gpui::{
-    AppContext, Axis, Context, Entity, FocusHandle, FontWeight, Length,
+    AppContext, Axis, Context, Entity, FocusHandle, Length, ListHorizontalSizingBehavior,
-    ListHorizontalSizingBehavior, ListSizingBehavior, MouseButton, Task, UniformListScrollHandle,
+    ListSizingBehavior, MouseButton, Task, UniformListScrollHandle, WeakEntity, transparent_black,
-    WeakEntity, transparent_black, uniform_list,
+    uniform_list,
 };
 use settings::Settings as _;
 use ui::{
@@ -12,7 +12,8 @@ use ui::{
     ComponentScope, Div, ElementId, FixedWidth as _, FluentBuilder as _, Indicator,
     InteractiveElement as _, IntoElement, ParentElement, Pixels, RegisterComponent, RenderOnce,
     Scrollbar, ScrollbarState, StatefulInteractiveElement as _, Styled, StyledExt as _,
-    StyledTypography, Window, div, example_group_with_title, h_flex, px, single_example, v_flex,
+    StyledTypography, Tooltip, Window, div, example_group_with_title, h_flex, px, single_example,
+    v_flex,
 };
 
 struct UniformListData<const COLS: usize> {
@@ -471,11 +472,10 @@ pub fn render_row<const COLS: usize>(
         .map_or([None; COLS], |widths| widths.map(Some));
 
     let row = div().w_full().child(
-        div()
+        h_flex()
+            .id("table_row")
+            .tooltip(Tooltip::text("Hit enter to edit"))
             .w_full()
-            .flex()
-            .flex_row()
-            .items_center()
             .justify_between()
             .px_1p5()
             .py_1()
@@ -518,11 +518,12 @@ pub fn render_header<const COLS: usize>(
         .p_2()
         .border_b_1()
         .border_color(cx.theme().colors().border)
-        .children(headers.into_iter().zip(column_widths).map(|(h, width)| {
+        .children(
-            base_cell_style(width, cx)
+            headers
-                .font_weight(FontWeight::SEMIBOLD)
+                .into_iter()
-                .child(h)
+                .zip(column_widths)
-        }))
+                .map(|(h, width)| base_cell_style(width, cx).child(h)),
+        )
 }
 
 #[derive(Clone)]