diff --git a/crates/editor2/src/editor.rs b/crates/editor2/src/editor.rs
index a0eca002b4abc0b3ebbc619b2816086b5a82e058..4e9a1dee90c624a99f4754f0a685a9b9e42ba9b6 100644
--- a/crates/editor2/src/editor.rs
+++ b/crates/editor2/src/editor.rs
@@ -98,7 +98,9 @@ pub use sum_tree::Bias;
 use sum_tree::TreeMap;
 use text::{OffsetUtf16, Rope};
 use theme::{ActiveTheme, PlayerColor, StatusColors, SyntaxTheme, ThemeColors, ThemeSettings};
-use ui::{h_stack, ButtonSize, ButtonStyle, Icon, IconButton, Popover, Tooltip};
+use ui::{
+    h_stack, ButtonSize, ButtonStyle, Icon, IconButton, ListItem, ListItemSpacing, Popover, Tooltip,
+};
 use ui::{prelude::*, IconSize};
 use util::{post_inc, RangeExt, ResultExt, TryFutureExt};
 use workspace::{searchable::SearchEvent, ItemNavHistory, Pane, SplitDirection, ViewId, Workspace};
@@ -1201,6 +1203,7 @@ impl CompletionsMenu {
                     .on_mouse_down(MouseButton::Left, |_, cx| cx.stop_propagation())
             })
         };
+
         let list = uniform_list(
             cx.view().clone(),
             "completions",
@@ -1238,28 +1241,27 @@ impl CompletionsMenu {
                             .with_highlights(&style.text, highlights);
                         let documentation_label =
                             if let Some(Documentation::SingleLine(text)) = documentation {
-                                Some(SharedString::from(text.clone()))
-                                    .filter(|text| !text.trim().is_empty())
+                                if text.trim().is_empty() {
+                                    None
+                                } else {
+                                    Some(
+                                        h_stack().ml_4().child(
+                                            Label::new(text.clone())
+                                                .size(LabelSize::Small)
+                                                .color(Color::Muted),
+                                        ),
+                                    )
+                                }
                             } else {
                                 None
                             };
 
-                        div()
-                            .id(mat.candidate_id)
-                            .min_w(px(220.))
-                            .max_w(px(540.))
-                            .whitespace_nowrap()
-                            .overflow_hidden()
-                            .px_1()
-                            .rounded(px(4.))
-                            .bg(cx.theme().colors().ghost_element_background)
-                            .hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
-                            .when(item_ix == selected_item, |div| {
-                                div.bg(cx.theme().colors().ghost_element_selected)
-                            })
-                            .on_mouse_down(
-                                MouseButton::Left,
-                                cx.listener(move |editor, _event, cx| {
+                        div().min_w(px(220.)).max_w(px(540.)).child(
+                            ListItem::new(mat.candidate_id)
+                                .inset(true)
+                                .spacing(ListItemSpacing::Sparse)
+                                .selected(item_ix == selected_item)
+                                .on_click(cx.listener(move |editor, _event, cx| {
                                     cx.stop_propagation();
                                     editor
                                         .confirm_completion(
@@ -1269,10 +1271,10 @@ impl CompletionsMenu {
                                             cx,
                                         )
                                         .map(|task| task.detach_and_log_err(cx));
-                                }),
-                            )
-                            .child(completion_label)
-                            .children(documentation_label)
+                                }))
+                                .child(h_stack().overflow_hidden().child(completion_label))
+                                .end_slot::<Div>(documentation_label),
+                        )
                     })
                     .collect()
             },
diff --git a/crates/ui2/src/components/list/list_item.rs b/crates/ui2/src/components/list/list_item.rs
index 403c24b8e52344ac53b295cc10ac9811e3150313..88ade283cc40a34b1ad3b40aa5db6c1a531f37fd 100644
--- a/crates/ui2/src/components/list/list_item.rs
+++ b/crates/ui2/src/components/list/list_item.rs
@@ -224,6 +224,9 @@ impl RenderOnce for ListItem {
                     }))
                     .child(
                         h_stack()
+                            // HACK: We need to set *any* width value here in order for this container to size correctly.
+                            // Without this the `h_stack` will overflow the parent `inner_list_item`.
+                            .w_px()
                             .flex_1()
                             .gap_1()
                             .children(self.start_slot)