Right-align key bindings in context menus

Max Brunsfeld and Marshall created 2 years ago

Remove extra div in `List` that prevented list items from
filling the available space.

Co-authored-by: Marshall <[e-mail]>

Change summary

crates/ui2/src/components/context_menu.rs | 17 ++++++++++++++---
crates/ui2/src/components/list.rs         | 12 +++++-------
2 files changed, 19 insertions(+), 10 deletions(-)

Detailed changes

crates/ui2/src/components/context_menu.rs

@@ -1,4 +1,6 @@
-use crate::{prelude::*, v_stack, KeyBinding, Label, List, ListItem, ListSeparator, ListSubHeader};
+use crate::{
+    h_stack, prelude::*, v_stack, KeyBinding, Label, List, ListItem, ListSeparator, ListSubHeader,
+};
 use gpui::{
     overlay, px, Action, AnchorCorner, AnyElement, AppContext, Bounds, ClickEvent, DismissEvent,
     DispatchPhase, Div, EventEmitter, FocusHandle, FocusableView, IntoElement, LayoutId,
@@ -129,8 +131,17 @@ impl Render for ContextMenu {
                             let dismiss = cx.listener(|_, _, cx| cx.emit(DismissEvent::Dismiss));
 
                             ListItem::new(entry.clone())
-                                .child(Label::new(entry.clone()))
-                                .children(key_binding.clone())
+                                .child(
+                                    h_stack()
+                                        .w_full()
+                                        .justify_between()
+                                        .child(Label::new(entry.clone()))
+                                        .children(
+                                            key_binding
+                                                .clone()
+                                                .map(|binding| div().ml_1().child(binding)),
+                                        ),
+                                )
                                 .on_click(move |event, cx| {
                                     callback(event, cx);
                                     dismiss(event, cx)

crates/ui2/src/components/list.rs

@@ -362,17 +362,15 @@ impl RenderOnce for List {
     type Rendered = Div;
 
     fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
-        let list_content = match (self.children.is_empty(), self.toggle) {
-            (false, _) => div().children(self.children),
-            (true, Toggle::Toggled(false)) => div(),
-            (true, _) => div().child(Label::new(self.empty_message.clone()).color(Color::Muted)),
-        };
-
         v_stack()
             .w_full()
             .py_1()
             .children(self.header.map(|header| header))
-            .child(list_content)
+            .map(|this| match (self.children.is_empty(), self.toggle) {
+                (false, _) => this.children(self.children),
+                (true, Toggle::Toggled(false)) => this,
+                (true, _) => this.child(Label::new(self.empty_message.clone()).color(Color::Muted)),
+            })
     }
 }