Rename h_stack and v_stack to h_flex and v_flex, respectively (#4053)

This PR renames the `h_stack` and `v_stack` to `h_flex` and `v_flex`,
respectively.

We were previously using `h_stack` and `v_stack` to match SwiftUI, but
`h_flex` and `v_flex` fit better with the web/flexbox terminology that
the rest of GPUI uses.

Additionally, we were already calling the utility functions used to
implement `h_stack` and `v_stack` by the new names.

Release Notes:

- N/A

crates/activity_indicator/src/activity_indicator.rs

@@ -295,7 +295,7 @@ impl Render for ActivityIndicator {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let content = self.content_to_render(cx);
 
-        let mut result = h_stack()
+        let mut result = h_flex()
             .id("activity-indicator")
             .on_action(cx.listener(Self::show_error_message))
             .on_action(cx.listener(Self::dismiss_error_message));

crates/assistant/src/assistant_panel.rs

@@ -1090,7 +1090,7 @@ fn build_api_key_editor(cx: &mut ViewContext<AssistantPanel>) -> View<Editor> {
 impl Render for AssistantPanel {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         if let Some(api_key_editor) = self.api_key_editor.clone() {
-            v_stack()
+            v_flex()
                 .on_action(cx.listener(AssistantPanel::save_credentials))
                 .track_focus(&self.focus_handle)
                 .child(Label::new(
@@ -1115,26 +1115,26 @@ impl Render for AssistantPanel {
         } else {
             let header = TabBar::new("assistant_header")
                 .start_child(
-                    h_stack().gap_1().child(Self::render_hamburger_button(cx)), // .children(title),
+                    h_flex().gap_1().child(Self::render_hamburger_button(cx)), // .children(title),
                 )
                 .children(self.active_editor().map(|editor| {
-                    h_stack()
+                    h_flex()
                         .h(rems(Tab::HEIGHT_IN_REMS))
                         .flex_1()
                         .px_2()
                         .child(Label::new(editor.read(cx).title(cx)).into_element())
                 }))
                 .end_child(if self.focus_handle.contains_focused(cx) {
-                    h_stack()
+                    h_flex()
                         .gap_2()
-                        .child(h_stack().gap_1().children(self.render_editor_tools(cx)))
+                        .child(h_flex().gap_1().children(self.render_editor_tools(cx)))
                         .child(
                             ui::Divider::vertical()
                                 .inset()
                                 .color(ui::DividerColor::Border),
                         )
                         .child(
-                            h_stack()
+                            h_flex()
                                 .gap_1()
                                 .child(Self::render_plus_button(cx))
                                 .child(self.render_zoom_button(cx)),
@@ -1153,7 +1153,7 @@ impl Render for AssistantPanel {
             } else {
                 div()
             };
-            v_stack()
+            v_flex()
                 .key_context("AssistantPanel")
                 .size_full()
                 .on_action(cx.listener(|this, _: &workspace::NewFile, cx| {
@@ -2530,7 +2530,7 @@ impl Render for ConversationEditor {
                     .child(self.editor.clone()),
             )
             .child(
-                h_stack()
+                h_flex()
                     .absolute()
                     .gap_1()
                     .top_3()
@@ -2616,7 +2616,7 @@ impl EventEmitter<InlineAssistantEvent> for InlineAssistant {}
 impl Render for InlineAssistant {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element {
         let measurements = self.measurements.get();
-        h_stack()
+        h_flex()
             .w_full()
             .py_2()
             .border_y_1()
@@ -2628,7 +2628,7 @@ impl Render for InlineAssistant {
             .on_action(cx.listener(Self::move_up))
             .on_action(cx.listener(Self::move_down))
             .child(
-                h_stack()
+                h_flex()
                     .justify_center()
                     .w(measurements.gutter_width)
                     .child(
@@ -2676,7 +2676,7 @@ impl Render for InlineAssistant {
                     }),
             )
             .child(
-                h_stack()
+                h_flex()
                     .w_full()
                     .ml(measurements.anchor_x - measurements.gutter_width)
                     .child(self.render_prompt_editor(cx)),

crates/auto_update/src/update_notification.rs

@@ -4,7 +4,7 @@ use gpui::{
 };
 use menu::Cancel;
 use util::channel::ReleaseChannel;
-use workspace::ui::{h_stack, v_stack, Icon, IconName, Label, StyledExt};
+use workspace::ui::{h_flex, v_flex, Icon, IconName, Label, StyledExt};
 
 pub struct UpdateNotification {
     version: SemanticVersion,
@@ -16,12 +16,12 @@ impl Render for UpdateNotification {
     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
         let app_name = cx.global::<ReleaseChannel>().display_name();
 
-        v_stack()
+        v_flex()
             .on_action(cx.listener(UpdateNotification::dismiss))
             .elevation_3(cx)
             .p_4()
             .child(
-                h_stack()
+                h_flex()
                     .justify_between()
                     .child(Label::new(format!(
                         "Updated to {app_name} {}",

crates/breadcrumbs/src/breadcrumbs.rs

@@ -31,7 +31,7 @@ impl EventEmitter<ToolbarItemEvent> for Breadcrumbs {}
 
 impl Render for Breadcrumbs {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        let element = h_stack().text_ui();
+        let element = h_flex().text_ui();
         let Some(active_item) = self.active_item.as_ref() else {
             return element;
         };
@@ -51,7 +51,7 @@ impl Render for Breadcrumbs {
             Label::new("›").color(Color::Muted).into_any_element()
         });
 
-        let breadcrumbs_stack = h_stack().gap_1().children(breadcrumbs);
+        let breadcrumbs_stack = h_flex().gap_1().children(breadcrumbs);
         match active_item
             .downcast::<Editor>()
             .map(|editor| editor.downgrade())

crates/collab_ui/src/chat_panel.rs

@@ -325,13 +325,13 @@ impl ChatPanel {
         };
         let this = cx.view().clone();
 
-        v_stack()
+        v_flex()
             .w_full()
             .relative()
             .overflow_hidden()
             .when(!is_continuation_from_previous, |this| {
                 this.pt_3().child(
-                    h_stack()
+                    h_flex()
                         .child(
                             div().absolute().child(
                                 Avatar::new(message.sender.avatar_uri.clone())
@@ -358,7 +358,7 @@ impl ChatPanel {
             })
             .when(is_continuation_from_previous, |this| this.pt_1())
             .child(
-                v_stack()
+                v_flex()
                     .w_full()
                     .text_ui_sm()
                     .id(element_id)
@@ -514,14 +514,14 @@ impl ChatPanel {
 
 impl Render for ChatPanel {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack()
+        v_flex()
             .track_focus(&self.focus_handle)
             .full()
             .on_action(cx.listener(Self::send))
             .child(
-                h_stack().z_index(1).child(
+                h_flex().z_index(1).child(
                     TabBar::new("chat_header").child(
-                        h_stack()
+                        h_flex()
                             .w_full()
                             .h(rems(ui::Tab::HEIGHT_IN_REMS))
                             .px_2()
@@ -567,7 +567,7 @@ impl Render for ChatPanel {
                 }
             }))
             .child(
-                h_stack()
+                h_flex()
                     .when(!self.is_scrolled_to_bottom, |el| {
                         el.border_t_1().border_color(cx.theme().colors().border)
                     })

crates/collab_ui/src/collab_panel.rs

@@ -887,7 +887,7 @@ impl CollabPanel {
                     .ok();
             }))
             .start_slot(
-                h_stack()
+                h_flex()
                     .gap_1()
                     .child(render_tree_branch(is_last, false, cx))
                     .child(IconButton::new(0, IconName::Folder)),
@@ -908,7 +908,7 @@ impl CollabPanel {
         ListItem::new(("screen", id))
             .selected(is_selected)
             .start_slot(
-                h_stack()
+                h_flex()
                     .gap_1()
                     .child(render_tree_branch(is_last, false, cx))
                     .child(IconButton::new(0, IconName::Screen)),
@@ -949,7 +949,7 @@ impl CollabPanel {
                 this.open_channel_notes(channel_id, cx);
             }))
             .start_slot(
-                h_stack()
+                h_flex()
                     .gap_1()
                     .child(render_tree_branch(false, true, cx))
                     .child(IconButton::new(0, IconName::File)),
@@ -970,7 +970,7 @@ impl CollabPanel {
                 this.join_channel_chat(channel_id, cx);
             }))
             .start_slot(
-                h_stack()
+                h_flex()
                     .gap_1()
                     .child(render_tree_branch(false, false, cx))
                     .child(IconButton::new(0, IconName::MessageBubbles)),
@@ -1726,12 +1726,12 @@ impl CollabPanel {
     fn render_signed_out(&mut self, cx: &mut ViewContext<Self>) -> Div {
         let collab_blurb = "Work with your team in realtime with collaborative editing, voice, shared notes and more.";
 
-        v_stack()
+        v_flex()
             .gap_6()
             .p_4()
             .child(Label::new(collab_blurb))
             .child(
-                v_stack()
+                v_flex()
                     .gap_2()
                     .child(
                         Button::new("sign_in", "Sign in")
@@ -1832,14 +1832,14 @@ impl CollabPanel {
     }
 
     fn render_signed_in(&mut self, cx: &mut ViewContext<Self>) -> Div {
-        v_stack()
+        v_flex()
             .size_full()
             .child(list(self.list_state.clone()).full())
             .child(
-                v_stack()
+                v_flex()
                     .child(div().mx_2().border_primary(cx).border_t())
                     .child(
-                        v_stack()
+                        v_flex()
                             .p_2()
                             .child(self.render_filter_input(&self.filter_editor, cx)),
                     ),
@@ -1961,7 +1961,7 @@ impl CollabPanel {
             | Section::Offline => true,
         };
 
-        h_stack()
+        h_flex()
             .w_full()
             .group("section-header")
             .child(
@@ -2007,7 +2007,7 @@ impl CollabPanel {
                 .selected(is_selected)
                 .on_click(cx.listener(move |this, _, cx| this.call(user_id, cx)))
                 .child(
-                    h_stack()
+                    h_flex()
                         .w_full()
                         .justify_between()
                         .child(Label::new(github_login.clone()))
@@ -2105,11 +2105,11 @@ impl CollabPanel {
             .indent_step_size(px(20.))
             .selected(is_selected)
             .child(
-                h_stack()
+                h_flex()
                     .w_full()
                     .justify_between()
                     .child(Label::new(github_login.clone()))
-                    .child(h_stack().children(controls)),
+                    .child(h_flex().children(controls)),
             )
             .start_slot(Avatar::new(user.avatar_uri.clone()))
     }
@@ -2149,11 +2149,11 @@ impl CollabPanel {
         ListItem::new(("channel-invite", channel.id as usize))
             .selected(is_selected)
             .child(
-                h_stack()
+                h_flex()
                     .w_full()
                     .justify_between()
                     .child(Label::new(channel.name.clone()))
-                    .child(h_stack().children(controls)),
+                    .child(h_flex().children(controls)),
             )
             .start_slot(
                 Icon::new(IconName::Hash)
@@ -2289,21 +2289,21 @@ impl CollabPanel {
                         .color(Color::Muted),
                     )
                     .child(
-                        h_stack()
+                        h_flex()
                             .id(channel_id as usize)
                             .child(Label::new(channel.name.clone()))
                             .children(face_pile.map(|face_pile| face_pile.render(cx))),
                     ),
             )
             .child(
-                h_stack()
+                h_flex()
                     .absolute()
                     .right(rems(0.))
                     .h_full()
                     // HACK: Without this the channel name clips on top of the icons, but I'm not sure why.
                     .z_index(10)
                     .child(
-                        h_stack()
+                        h_flex()
                             .h_full()
                             .gap_1()
                             .px_1()
@@ -2410,7 +2410,7 @@ fn render_tree_branch(is_last: bool, overdraw: bool, cx: &mut WindowContext) ->
 
 impl Render for CollabPanel {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack()
+        v_flex()
             .key_context("CollabPanel")
             .on_action(cx.listener(CollabPanel::cancel))
             .on_action(cx.listener(CollabPanel::select_next))
@@ -2603,7 +2603,7 @@ struct DraggedChannelView {
 impl Render for DraggedChannelView {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element {
         let ui_font = ThemeSettings::get_global(cx).ui_font.family.clone();
-        h_stack()
+        h_flex()
             .font(ui_font)
             .bg(cx.theme().colors().background)
             .w(self.width)

crates/collab_ui/src/collab_panel/channel_modal.rs

@@ -152,19 +152,19 @@ impl Render for ChannelModal {
         let visibility = channel.visibility;
         let mode = self.picker.read(cx).delegate.mode;
 
-        v_stack()
+        v_flex()
             .key_context("ChannelModal")
             .on_action(cx.listener(Self::toggle_mode))
             .on_action(cx.listener(Self::dismiss))
             .elevation_3(cx)
             .w(rems(34.))
             .child(
-                v_stack()
+                v_flex()
                     .px_2()
                     .py_1()
                     .gap_2()
                     .child(
-                        h_stack()
+                        h_flex()
                             .w_px()
                             .flex_1()
                             .gap_1()
@@ -172,13 +172,13 @@ impl Render for ChannelModal {
                             .child(Label::new(channel_name)),
                     )
                     .child(
-                        h_stack()
+                        h_flex()
                             .w_full()
                             .h(rems(22. / 16.))
                             .justify_between()
                             .line_height(rems(1.25))
                             .child(
-                                h_stack()
+                                h_flex()
                                     .gap_2()
                                     .child(
                                         Checkbox::new(
@@ -212,7 +212,7 @@ impl Render for ChannelModal {
                             ),
                     )
                     .child(
-                        h_stack()
+                        h_flex()
                             .child(
                                 div()
                                     .id("manage-members")
@@ -391,7 +391,7 @@ impl PickerDelegate for ChannelModalDelegate {
                 .selected(selected)
                 .start_slot(Avatar::new(user.avatar_uri.clone()))
                 .child(Label::new(user.github_login.clone()))
-                .end_slot(h_stack().gap_2().map(|slot| {
+                .end_slot(h_flex().gap_2().map(|slot| {
                     match self.mode {
                         Mode::ManageMembers => slot
                             .children(

crates/collab_ui/src/collab_panel/contact_finder.rs

@@ -36,17 +36,17 @@ impl ContactFinder {
 
 impl Render for ContactFinder {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack()
+        v_flex()
             .elevation_3(cx)
             .child(
-                v_stack()
+                v_flex()
                     .px_2()
                     .py_1()
                     .bg(cx.theme().colors().element_background)
                     // HACK: Prevent the background color from overflowing the parent container.
                     .rounded_t(px(8.))
                     .child(Label::new("Contacts"))
-                    .child(h_stack().child(Label::new("Invite new contacts"))),
+                    .child(h_flex().child(Label::new("Invite new contacts"))),
             )
             .child(self.picker.clone())
             .w(rems(34.))

crates/collab_ui/src/collab_titlebar_item.rs

@@ -14,7 +14,7 @@ use rpc::proto;
 use std::sync::Arc;
 use theme::{ActiveTheme, PlayerColors};
 use ui::{
-    h_stack, popover_menu, prelude::*, Avatar, Button, ButtonLike, ButtonStyle, ContextMenu, Icon,
+    h_flex, popover_menu, prelude::*, Avatar, Button, ButtonLike, ButtonStyle, ContextMenu, Icon,
     IconButton, IconName, TintColor, Tooltip,
 };
 use util::ResultExt;
@@ -58,7 +58,7 @@ impl Render for CollabTitlebarItem {
         let client = self.client.clone();
         let project_id = self.project.read(cx).remote_id();
 
-        h_stack()
+        h_flex()
             .id("titlebar")
             .justify_between()
             .w_full()
@@ -83,7 +83,7 @@ impl Render for CollabTitlebarItem {
             })
             // left side
             .child(
-                h_stack()
+                h_flex()
                     .gap_1()
                     .children(self.render_project_host(cx))
                     .child(self.render_project_name(cx))
@@ -128,7 +128,7 @@ impl Render for CollabTitlebarItem {
                                     )?;
 
                                     Some(
-                                        v_stack()
+                                        v_flex()
                                             .id(("collaborator", collaborator.user.id))
                                             .child(face_pile)
                                             .child(render_color_ribbon(
@@ -160,7 +160,7 @@ impl Render for CollabTitlebarItem {
             )
             // right side
             .child(
-                h_stack()
+                h_flex()
                     .gap_1()
                     .pr_1()
                     .when_some(room, |this, room| {
@@ -634,7 +634,7 @@ impl CollabTitlebarItem {
                 .trigger(
                     ButtonLike::new("user-menu")
                         .child(
-                            h_stack()
+                            h_flex()
                                 .gap_0p5()
                                 .child(Avatar::new(user.avatar_uri.clone()))
                                 .child(Icon::new(IconName::ChevronDown).color(Color::Muted)),
@@ -657,7 +657,7 @@ impl CollabTitlebarItem {
                 .trigger(
                     ButtonLike::new("user-menu")
                         .child(
-                            h_stack()
+                            h_flex()
                                 .gap_0p5()
                                 .child(Icon::new(IconName::ChevronDown).color(Color::Muted)),
                         )

crates/collab_ui/src/notification_panel.rs

@@ -19,7 +19,7 @@ use serde::{Deserialize, Serialize};
 use settings::{Settings, SettingsStore};
 use std::{sync::Arc, time::Duration};
 use time::{OffsetDateTime, UtcOffset};
-use ui::{h_stack, prelude::*, v_stack, Avatar, Button, Icon, IconButton, IconName, Label};
+use ui::{h_flex, prelude::*, v_flex, Avatar, Button, Icon, IconButton, IconName, Label};
 use util::{ResultExt, TryFutureExt};
 use workspace::{
     dock::{DockPosition, Panel, PanelEvent},
@@ -251,13 +251,13 @@ impl NotificationPanel {
                         .rounded_full()
                 }))
                 .child(
-                    v_stack()
+                    v_flex()
                         .gap_1()
                         .size_full()
                         .overflow_hidden()
                         .child(Label::new(text.clone()))
                         .child(
-                            h_stack()
+                            h_flex()
                                 .child(
                                     Label::new(format_timestamp(
                                         timestamp,
@@ -276,7 +276,7 @@ impl NotificationPanel {
                                     )))
                                 } else if needs_response {
                                     Some(
-                                        h_stack()
+                                        h_flex()
                                             .flex_grow()
                                             .justify_end()
                                             .child(Button::new("decline", "Decline").on_click({
@@ -541,10 +541,10 @@ impl NotificationPanel {
 
 impl Render for NotificationPanel {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack()
+        v_flex()
             .size_full()
             .child(
-                h_stack()
+                h_flex()
                     .justify_between()
                     .px_2()
                     .py_1()
@@ -558,7 +558,7 @@ impl Render for NotificationPanel {
             .map(|this| {
                 if self.client.user_id().is_none() {
                     this.child(
-                        v_stack()
+                        v_flex()
                             .gap_2()
                             .p_4()
                             .child(
@@ -592,7 +592,7 @@ impl Render for NotificationPanel {
                     )
                 } else if self.notification_list.item_count() == 0 {
                     this.child(
-                        v_stack().p_4().child(
+                        v_flex().p_4().child(
                             div().flex().w_full().items_center().child(
                                 Label::new("You have no notifications.")
                                     .color(Color::Muted)
@@ -711,7 +711,7 @@ impl Render for NotificationToast {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let user = self.actor.clone();
 
-        h_stack()
+        h_flex()
             .id("notification_panel_toast")
             .children(user.map(|user| Avatar::new(user.avatar_uri.clone())))
             .child(Label::new(self.text.clone()))

crates/collab_ui/src/notifications/collab_notification.rs

@@ -33,7 +33,7 @@ impl ParentElement for CollabNotification {
 
 impl RenderOnce for CollabNotification {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        h_stack()
+        h_flex()
             .text_ui()
             .justify_between()
             .size_full()
@@ -42,9 +42,9 @@ impl RenderOnce for CollabNotification {
             .p_2()
             .gap_2()
             .child(img(self.avatar_uri).w_12().h_12().rounded_full())
-            .child(v_stack().overflow_hidden().children(self.children))
+            .child(v_flex().overflow_hidden().children(self.children))
             .child(
-                v_stack()
+                v_flex()
                     .child(self.accept_button)
                     .child(self.dismiss_button),
             )

crates/collab_ui/src/notifications/incoming_call_notification.rs

@@ -137,7 +137,7 @@ impl Render for IncomingCallNotification {
                     move |_, cx| state.respond(false, cx)
                 }),
             )
-            .child(v_stack().overflow_hidden().child(Label::new(format!(
+            .child(v_flex().overflow_hidden().child(Label::new(format!(
                 "{} is sharing a project in Zed",
                 self.state.call.calling_user.github_login
             )))),

crates/collab_ui/src/notifications/stories/collab_notification.rs

@@ -24,7 +24,7 @@ impl Render for CollabNotificationStory {
                         Button::new("decline", "Decline"),
                     )
                     .child(
-                        v_stack()
+                        v_flex()
                             .overflow_hidden()
                             .child(Label::new("maxdeviant is sharing a project in Zed")),
                     ),

crates/command_palette/src/command_palette.rs

@@ -11,7 +11,7 @@ use gpui::{
 };
 use picker::{Picker, PickerDelegate};
 
-use ui::{h_stack, prelude::*, v_stack, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing};
+use ui::{h_flex, prelude::*, v_flex, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing};
 use util::{
     channel::{parse_zed_link, ReleaseChannel, RELEASE_CHANNEL},
     ResultExt,
@@ -84,7 +84,7 @@ impl FocusableView for CommandPalette {
 
 impl Render for CommandPalette {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack().w(rems(34.)).child(self.picker.clone())
+        v_flex().w(rems(34.)).child(self.picker.clone())
     }
 }
 
@@ -311,7 +311,7 @@ impl PickerDelegate for CommandPaletteDelegate {
                 .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .child(
-                    h_stack()
+                    h_flex()
                         .w_full()
                         .justify_between()
                         .child(HighlightedLabel::new(

crates/copilot_ui/src/sign_in.rs

@@ -57,7 +57,7 @@ impl CopilotCodeVerification {
             .read_from_clipboard()
             .map(|item| item.text() == &data.user_code)
             .unwrap_or(false);
-        h_stack()
+        h_flex()
             .w_full()
             .p_1()
             .border()
@@ -90,7 +90,7 @@ impl CopilotCodeVerification {
         } else {
             "Connect to Github"
         };
-        v_stack()
+        v_flex()
             .flex_1()
             .gap_2()
             .items_center()
@@ -118,7 +118,7 @@ impl CopilotCodeVerification {
             )
     }
     fn render_enabled_modal(cx: &mut ViewContext<Self>) -> impl Element {
-        v_stack()
+        v_flex()
             .gap_2()
             .child(Headline::new("Copilot Enabled!").size(HeadlineSize::Large))
             .child(Label::new(
@@ -132,7 +132,7 @@ impl CopilotCodeVerification {
     }
 
     fn render_unauthorized_modal() -> impl Element {
-        v_stack()
+        v_flex()
             .child(Headline::new("You must have an active GitHub Copilot subscription.").size(HeadlineSize::Large))
 
             .child(Label::new(
@@ -163,7 +163,7 @@ impl Render for CopilotCodeVerification {
             _ => div().into_any_element(),
         };
 
-        v_stack()
+        v_flex()
             .id("copilot code verification")
             .elevation_3(cx)
             .w_96()

crates/diagnostics/src/diagnostics.rs

@@ -36,7 +36,7 @@ use std::{
 };
 use theme::ActiveTheme;
 pub use toolbar_controls::ToolbarControls;
-use ui::{h_stack, prelude::*, Icon, IconName, Label};
+use ui::{h_flex, prelude::*, Icon, IconName, Label};
 use util::TryFutureExt;
 use workspace::{
     item::{BreadcrumbText, Item, ItemEvent, ItemHandle},
@@ -654,11 +654,11 @@ impl Item for ProjectDiagnosticsEditor {
                 })
                 .into_any_element()
         } else {
-            h_stack()
+            h_flex()
                 .gap_1()
                 .when(self.summary.error_count > 0, |then| {
                     then.child(
-                        h_stack()
+                        h_flex()
                             .gap_1()
                             .child(Icon::new(IconName::XCircle).color(Color::Error))
                             .child(Label::new(self.summary.error_count.to_string()).color(
@@ -672,7 +672,7 @@ impl Item for ProjectDiagnosticsEditor {
                 })
                 .when(self.summary.warning_count > 0, |then| {
                     then.child(
-                        h_stack()
+                        h_flex()
                             .gap_1()
                             .child(Icon::new(IconName::ExclamationTriangle).color(Color::Warning))
                             .child(Label::new(self.summary.warning_count.to_string()).color(
@@ -796,7 +796,7 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
     let message: SharedString = message.into();
     Arc::new(move |cx| {
         let highlight_style: HighlightStyle = cx.theme().colors().text_accent.into();
-        h_stack()
+        h_flex()
             .id("diagnostic header")
             .py_2()
             .pl_10()
@@ -805,7 +805,7 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
             .justify_between()
             .gap_2()
             .child(
-                h_stack()
+                h_flex()
                     .gap_3()
                     .map(|stack| {
                         stack.child(
@@ -824,7 +824,7 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
                         )
                     })
                     .child(
-                        h_stack()
+                        h_flex()
                             .gap_1()
                             .child(
                                 StyledText::new(message.clone()).with_highlights(
@@ -844,7 +844,7 @@ fn diagnostic_header_renderer(diagnostic: Diagnostic) -> RenderBlock {
                     ),
             )
             .child(
-                h_stack()
+                h_flex()
                     .gap_1()
                     .when_some(diagnostic.source.as_ref(), |stack, source| {
                         stack.child(

crates/diagnostics/src/items.rs

@@ -6,7 +6,7 @@ use gpui::{
 };
 use language::Diagnostic;
 use lsp::LanguageServerId;
-use ui::{h_stack, prelude::*, Button, ButtonLike, Color, Icon, IconName, Label, Tooltip};
+use ui::{h_flex, prelude::*, Button, ButtonLike, Color, Icon, IconName, Label, Tooltip};
 use workspace::{item::ItemHandle, StatusItemView, ToolbarItemEvent, Workspace};
 
 use crate::{Deploy, ProjectDiagnosticsEditor};
@@ -23,14 +23,14 @@ pub struct DiagnosticIndicator {
 impl Render for DiagnosticIndicator {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         let diagnostic_indicator = match (self.summary.error_count, self.summary.warning_count) {
-            (0, 0) => h_stack().map(|this| {
+            (0, 0) => h_flex().map(|this| {
                 this.child(
                     Icon::new(IconName::Check)
                         .size(IconSize::Small)
                         .color(Color::Default),
                 )
             }),
-            (0, warning_count) => h_stack()
+            (0, warning_count) => h_flex()
                 .gap_1()
                 .child(
                     Icon::new(IconName::ExclamationTriangle)
@@ -38,7 +38,7 @@ impl Render for DiagnosticIndicator {
                         .color(Color::Warning),
                 )
                 .child(Label::new(warning_count.to_string()).size(LabelSize::Small)),
-            (error_count, 0) => h_stack()
+            (error_count, 0) => h_flex()
                 .gap_1()
                 .child(
                     Icon::new(IconName::XCircle)
@@ -46,7 +46,7 @@ impl Render for DiagnosticIndicator {
                         .color(Color::Error),
                 )
                 .child(Label::new(error_count.to_string()).size(LabelSize::Small)),
-            (error_count, warning_count) => h_stack()
+            (error_count, warning_count) => h_flex()
                 .gap_1()
                 .child(
                     Icon::new(IconName::XCircle)
@@ -64,7 +64,7 @@ impl Render for DiagnosticIndicator {
 
         let status = if !self.in_progress_checks.is_empty() {
             Some(
-                h_stack()
+                h_flex()
                     .gap_2()
                     .child(Icon::new(IconName::ArrowCircle).size(IconSize::Small))
                     .child(
@@ -91,7 +91,7 @@ impl Render for DiagnosticIndicator {
             None
         };
 
-        h_stack()
+        h_flex()
             .h(rems(1.375))
             .gap_2()
             .child(

crates/editor/src/editor.rs

@@ -99,8 +99,8 @@ use sum_tree::TreeMap;
 use text::{OffsetUtf16, Rope};
 use theme::{ActiveTheme, PlayerColor, StatusColors, SyntaxTheme, ThemeColors, ThemeSettings};
 use ui::{
-    h_stack, prelude::*, ButtonSize, ButtonStyle, IconButton, IconName, IconSize, ListItem,
+    h_flex, prelude::*, ButtonSize, ButtonStyle, IconButton, IconName, IconSize, ListItem, Popover,
-    Popover, Tooltip,
+    Tooltip,
 };
 use util::{post_inc, RangeExt, ResultExt, TryFutureExt};
 use workspace::{searchable::SearchEvent, ItemNavHistory, Pane, SplitDirection, ViewId, Workspace};
@@ -1264,7 +1264,7 @@ impl CompletionsMenu {
                                     None
                                 } else {
                                     Some(
-                                        h_stack().ml_4().child(
+                                        h_flex().ml_4().child(
                                             Label::new(text.clone())
                                                 .size(LabelSize::Small)
                                                 .color(Color::Muted),
@@ -1290,7 +1290,7 @@ impl CompletionsMenu {
                                         )
                                         .map(|task| task.detach_and_log_err(cx));
                                 }))
-                                .child(h_stack().overflow_hidden().child(completion_label))
+                                .child(h_flex().overflow_hidden().child(completion_label))
                                 .end_slot::<Div>(documentation_label),
                         )
                     })
@@ -9747,7 +9747,7 @@ pub fn diagnostic_block_renderer(diagnostic: Diagnostic, _is_valid: bool) -> Ren
         let group_id: SharedString = cx.block_id.to_string().into();
         // TODO: Nate: We should tint the background of the block with the severity color
         // We need to extend the theme before we can do this
-        h_stack()
+        h_flex()
             .id(cx.block_id)
             .group(group_id.clone())
             .relative()

crates/editor/src/element.rs

@@ -53,7 +53,7 @@ use std::{
 use sum_tree::Bias;
 use theme::{ActiveTheme, PlayerColor};
 use ui::prelude::*;
-use ui::{h_stack, ButtonLike, ButtonStyle, IconButton, Tooltip};
+use ui::{h_flex, ButtonLike, ButtonStyle, IconButton, Tooltip};
 use util::ResultExt;
 use workspace::item::Item;
 
@@ -2293,7 +2293,7 @@ impl EditorElement {
                             .size_full()
                             .p_1p5()
                             .child(
-                                h_stack()
+                                h_flex()
                                     .id("path header block")
                                     .py_1p5()
                                     .pl_3()
@@ -2306,8 +2306,8 @@ impl EditorElement {
                                     .justify_between()
                                     .hover(|style| style.bg(cx.theme().colors().element_hover))
                                     .child(
-                                        h_stack().gap_3().child(
+                                        h_flex().gap_3().child(
-                                            h_stack()
+                                            h_flex()
                                                 .gap_2()
                                                 .child(
                                                     filename
@@ -2339,12 +2339,12 @@ impl EditorElement {
                                     }),
                             )
                     } else {
-                        h_stack()
+                        h_flex()
                             .id(("collapsed context", block_id))
                             .size_full()
                             .gap(gutter_padding)
                             .child(
-                                h_stack()
+                                h_flex()
                                     .justify_end()
                                     .flex_none()
                                     .w(gutter_width - gutter_padding)

crates/editor/src/items.rs

@@ -32,7 +32,7 @@ use std::{
 };
 use text::Selection;
 use theme::Theme;
-use ui::{h_stack, prelude::*, Label};
+use ui::{h_flex, prelude::*, Label};
 use util::{paths::PathExt, paths::FILE_ROW_COLUMN_DELIMITER, ResultExt, TryFutureExt};
 use workspace::{
     item::{BreadcrumbText, FollowEvent, FollowableItemHandle},
@@ -619,7 +619,7 @@ impl Item for Editor {
             Some(util::truncate_and_trailoff(&description, MAX_TAB_TITLE_LEN))
         });
 
-        h_stack()
+        h_flex()
             .gap_2()
             .child(Label::new(self.title(cx).to_string()).color(label_color))
             .when_some(description, |this, description| {

crates/feedback/src/feedback_modal.rs

@@ -422,7 +422,7 @@ impl Render for FeedbackModal {
         let open_community_repo =
             cx.listener(|_, _, cx| cx.dispatch_action(Box::new(OpenZedCommunityRepo)));
 
-        v_stack()
+        v_flex()
             .elevation_3(cx)
             .key_context("GiveFeedback")
             .on_action(cx.listener(Self::cancel))
@@ -461,10 +461,10 @@ impl Render for FeedbackModal {
                     .child(self.feedback_editor.clone()),
             )
             .child(
-                v_stack()
+                v_flex()
                     .gap_1()
                     .child(
-                        h_stack()
+                        h_flex()
                             .bg(cx.theme().colors().editor_background)
                             .p_2()
                             .border()
@@ -483,7 +483,7 @@ impl Render for FeedbackModal {
                     ),
             )
             .child(
-                h_stack()
+                h_flex()
                     .justify_between()
                     .gap_1()
                     .child(
@@ -495,7 +495,7 @@ impl Render for FeedbackModal {
                             .on_click(open_community_repo),
                     )
                     .child(
-                        h_stack()
+                        h_flex()
                             .gap_1()
                             .child(
                                 Button::new("cancel_feedback", "Cancel")

crates/file_finder/src/file_finder.rs

@@ -119,7 +119,7 @@ impl FocusableView for FileFinder {
 }
 impl Render for FileFinder {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack().w(rems(34.)).child(self.picker.clone())
+        v_flex().w(rems(34.)).child(self.picker.clone())
     }
 }
 
@@ -786,7 +786,7 @@ impl PickerDelegate for FileFinderDelegate {
                 .inset(true)
                 .selected(selected)
                 .child(
-                    v_stack()
+                    v_flex()
                         .child(HighlightedLabel::new(file_name, file_name_positions))
                         .child(HighlightedLabel::new(full_path, full_path_positions)),
                 ),

crates/go_to_line/src/go_to_line.rs

@@ -5,7 +5,7 @@ use gpui::{
 };
 use text::{Bias, Point};
 use theme::ActiveTheme;
-use ui::{h_stack, prelude::*, v_stack, Label};
+use ui::{h_flex, prelude::*, v_flex, Label};
 use util::paths::FILE_ROW_COLUMN_DELIMITER;
 use workspace::ModalView;
 
@@ -160,12 +160,12 @@ impl Render for GoToLine {
             .on_action(cx.listener(Self::confirm))
             .w_96()
             .child(
-                v_stack()
+                v_flex()
                     .px_1()
                     .pt_0p5()
                     .gap_px()
                     .child(
-                        v_stack()
+                        v_flex()
                             .py_0p5()
                             .px_1()
                             .child(div().px_1().py_0p5().child(self.line_editor.clone())),
@@ -177,7 +177,7 @@ impl Render for GoToLine {
                             .bg(cx.theme().colors().element_background),
                     )
                     .child(
-                        h_stack()
+                        h_flex()
                             .justify_between()
                             .px_2()
                             .py_1()

crates/language_selector/src/language_selector.rs

@@ -68,7 +68,7 @@ impl LanguageSelector {
 
 impl Render for LanguageSelector {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack().w(rems(34.)).child(self.picker.clone())
+        v_flex().w(rems(34.)).child(self.picker.clone())
     }
 }
 

crates/language_tools/src/lsp_log.rs

@@ -785,7 +785,7 @@ impl Render for LspLogToolbarItemView {
                             {
                                 let log_toolbar_view = log_toolbar_view.clone();
                                 move |cx| {
-                                    h_stack()
+                                    h_flex()
                                         .w_full()
                                         .justify_between()
                                         .child(Label::new(RPC_MESSAGES))
@@ -837,7 +837,7 @@ impl Render for LspLogToolbarItemView {
                 .into()
             });
 
-        h_stack().size_full().child(lsp_menu).child(
+        h_flex().size_full().child(lsp_menu).child(
             div()
                 .child(
                     Button::new("clear_log_button", "Clear").on_click(cx.listener(

crates/language_tools/src/syntax_tree_view.rs

@@ -9,7 +9,7 @@ use language::{Buffer, OwnedSyntaxLayerInfo};
 use std::{mem, ops::Range};
 use theme::ActiveTheme;
 use tree_sitter::{Node, TreeCursor};
-use ui::{h_stack, popover_menu, ButtonLike, Color, ContextMenu, Label, LabelCommon, PopoverMenu};
+use ui::{h_flex, popover_menu, ButtonLike, Color, ContextMenu, Label, LabelCommon, PopoverMenu};
 use workspace::{
     item::{Item, ItemHandle},
     SplitDirection, ToolbarItemEvent, ToolbarItemLocation, ToolbarItemView, Workspace,
@@ -239,7 +239,7 @@ impl SyntaxTreeView {
 
     fn render_node(cursor: &TreeCursor, depth: u32, selected: bool, cx: &AppContext) -> Div {
         let colors = cx.theme().colors();
-        let mut row = h_stack();
+        let mut row = h_flex();
         if let Some(field_name) = cursor.field_name() {
             row = row.children([Label::new(field_name).color(Color::Info), Label::new(": ")]);
         }

crates/outline/src/outline.rs

@@ -64,7 +64,7 @@ impl ModalView for OutlineView {
 
 impl Render for OutlineView {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack().w(rems(34.)).child(self.picker.clone())
+        v_flex().w(rems(34.)).child(self.picker.clone())
     }
 }
 

crates/picker/src/picker.rs

@@ -5,7 +5,7 @@ use gpui::{
     View, ViewContext, WindowContext,
 };
 use std::{cmp, sync::Arc};
-use ui::{prelude::*, v_stack, Color, Divider, Label, ListItem, ListItemSpacing, ListSeparator};
+use ui::{prelude::*, v_flex, Color, Divider, Label, ListItem, ListItemSpacing, ListSeparator};
 use workspace::ModalView;
 
 pub struct Picker<D: PickerDelegate> {
@@ -236,7 +236,7 @@ impl<D: PickerDelegate> ModalView for Picker<D> {}
 
 impl<D: PickerDelegate> Render for Picker<D> {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        let picker_editor = h_stack()
+        let picker_editor = h_flex()
             .overflow_hidden()
             .flex_none()
             .h_9()
@@ -264,7 +264,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
             .child(Divider::horizontal())
             .when(self.delegate.match_count() > 0, |el| {
                 el.child(
-                    v_stack()
+                    v_flex()
                         .flex_grow()
                         .py_2()
                         .max_h(self.max_height.unwrap_or(rems(18.).into()))
@@ -309,7 +309,7 @@ impl<D: PickerDelegate> Render for Picker<D> {
             })
             .when(self.delegate.match_count() == 0, |el| {
                 el.child(
-                    v_stack().flex_grow().py_2().child(
+                    v_flex().flex_grow().py_2().child(
                         ListItem::new("empty_state")
                             .inset(true)
                             .spacing(ListItemSpacing::Sparse)

crates/project_panel/src/project_panel.rs

@@ -30,7 +30,7 @@ use std::{
     sync::Arc,
 };
 use theme::ThemeSettings;
-use ui::{prelude::*, v_stack, ContextMenu, Icon, KeyBinding, Label, ListItem};
+use ui::{prelude::*, v_flex, ContextMenu, Icon, KeyBinding, Label, ListItem};
 use unicase::UniCase;
 use util::{maybe, ResultExt, TryFutureExt};
 use workspace::{
@@ -1541,7 +1541,7 @@ impl Render for ProjectPanel {
                         .child(menu.clone())
                 }))
         } else {
-            v_stack()
+            v_flex()
                 .id("empty-project_panel")
                 .size_full()
                 .p_4()
@@ -1565,7 +1565,7 @@ impl Render for DraggedProjectEntryView {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element {
         let settings = ProjectPanelSettings::get_global(cx);
         let ui_font = ThemeSettings::get_global(cx).ui_font.family.clone();
-        h_stack()
+        h_flex()
             .font(ui_font)
             .bg(cx.theme().colors().background)
             .w(self.width)

crates/project_symbols/src/project_symbols.rs

@@ -11,7 +11,7 @@ use std::{borrow::Cow, cmp::Reverse, sync::Arc};
 use theme::ActiveTheme;
 use util::ResultExt;
 use workspace::{
-    ui::{v_stack, Color, Label, LabelCommon, LabelLike, ListItem, ListItemSpacing, Selectable},
+    ui::{v_flex, Color, Label, LabelCommon, LabelLike, ListItem, ListItemSpacing, Selectable},
     Workspace,
 };
 
@@ -242,7 +242,7 @@ impl PickerDelegate for ProjectSymbolsDelegate {
                 .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .child(
-                    v_stack()
+                    v_flex()
                         .child(
                             LabelLike::new().child(
                                 StyledText::new(label)

crates/quick_action_bar/src/quick_action_bar.rs

@@ -93,7 +93,7 @@ impl Render for QuickActionBar {
             },
         );
 
-        h_stack()
+        h_flex()
             .id("quick action bar")
             .gap_2()
             .children(inlay_hints_button)

crates/recent_projects/src/recent_projects.rs

@@ -104,7 +104,7 @@ impl FocusableView for RecentProjects {
 
 impl Render for RecentProjects {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack()
+        v_flex()
             .w(rems(self.rem_width))
             .child(self.picker.clone())
             .on_mouse_down_out(cx.listener(|this, _, cx| {
@@ -236,7 +236,7 @@ impl PickerDelegate for RecentProjectsDelegate {
                 .spacing(ListItemSpacing::Sparse)
                 .selected(selected)
                 .child(
-                    v_stack()
+                    v_flex()
                         .child(highlighted_location.names)
                         .when(self.render_paths, |this| {
                             this.children(highlighted_location.paths)

crates/search/src/buffer_search.rs

@@ -21,7 +21,7 @@ use settings::Settings;
 use std::{any::Any, sync::Arc};
 use theme::ThemeSettings;
 
-use ui::{h_stack, prelude::*, Icon, IconButton, IconName, ToggleButton, Tooltip};
+use ui::{h_flex, prelude::*, Icon, IconButton, IconName, ToggleButton, Tooltip};
 use util::ResultExt;
 use workspace::{
     item::ItemHandle,
@@ -186,7 +186,7 @@ impl Render for BufferSearchBar {
         } else {
             cx.theme().colors().border
         };
-        h_stack()
+        h_flex()
             .w_full()
             .gap_2()
             .key_context(key_context)
@@ -216,7 +216,7 @@ impl Render for BufferSearchBar {
                 this.on_action(cx.listener(Self::toggle_whole_word))
             })
             .child(
-                h_stack()
+                h_flex()
                     .flex_1()
                     .px_2()
                     .py_1()
@@ -243,11 +243,11 @@ impl Render for BufferSearchBar {
                     })),
             )
             .child(
-                h_stack()
+                h_flex()
                     .gap_2()
                     .flex_none()
                     .child(
-                        h_stack()
+                        h_flex()
                             .child(
                                 ToggleButton::new("search-mode-text", SearchMode::Text.label())
                                     .style(ButtonStyle::Filled)
@@ -303,12 +303,12 @@ impl Render for BufferSearchBar {
                     }),
             )
             .child(
-                h_stack()
+                h_flex()
                     .gap_0p5()
                     .flex_1()
                     .when(self.replace_enabled, |this| {
                         this.child(
-                            h_stack()
+                            h_flex()
                                 .flex_1()
                                 // We're giving this a fixed height to match the height of the search input,
                                 // which has an icon inside that is increasing its height.
@@ -346,7 +346,7 @@ impl Render for BufferSearchBar {
                     }),
             )
             .child(
-                h_stack()
+                h_flex()
                     .gap_0p5()
                     .flex_none()
                     .child(

crates/search/src/project_search.rs

@@ -38,7 +38,7 @@ use std::{
 use theme::ThemeSettings;
 
 use ui::{
-    h_stack, prelude::*, v_stack, Icon, IconButton, IconName, Label, LabelCommon, LabelSize,
+    h_flex, prelude::*, v_flex, Icon, IconButton, IconName, Label, LabelCommon, LabelSize,
     Selectable, ToggleButton, Tooltip,
 };
 use util::{paths::PathMatcher, ResultExt as _};
@@ -360,19 +360,19 @@ impl Render for ProjectSearchView {
                     .max_w_96()
                     .child(Label::new(text).size(LabelSize::Small))
             });
-            v_stack()
+            v_flex()
                 .flex_1()
                 .size_full()
                 .justify_center()
                 .bg(cx.theme().colors().editor_background)
                 .track_focus(&self.focus_handle)
                 .child(
-                    h_stack()
+                    h_flex()
                         .size_full()
                         .justify_center()
-                        .child(h_stack().flex_1())
+                        .child(h_flex().flex_1())
-                        .child(v_stack().child(major_text).children(minor_text))
+                        .child(v_flex().child(major_text).children(minor_text))
-                        .child(h_stack().flex_1()),
+                        .child(h_flex().flex_1()),
                 )
         }
     }
@@ -431,7 +431,7 @@ impl Item for ProjectSearchView {
         let tab_name = last_query
             .filter(|query| !query.is_empty())
             .unwrap_or_else(|| "Project search".into());
-        h_stack()
+        h_flex()
             .gap_2()
             .child(Icon::new(IconName::MagnifyingGlass).color(if selected {
                 Color::Default
@@ -1601,8 +1601,8 @@ impl Render for ProjectSearchBar {
         let search = search.read(cx);
         let semantic_is_available = SemanticIndex::enabled(cx);
 
-        let query_column = v_stack().child(
+        let query_column = v_flex().child(
-            h_stack()
+            h_flex()
                 .min_w(rems(512. / 16.))
                 .px_2()
                 .py_1()
@@ -1617,7 +1617,7 @@ impl Render for ProjectSearchBar {
                 .child(Icon::new(IconName::MagnifyingGlass))
                 .child(self.render_text_input(&search.query_editor, cx))
                 .child(
-                    h_stack()
+                    h_flex()
                         .child(
                             IconButton::new("project-search-filter-button", IconName::Filter)
                                 .tooltip(|cx| {
@@ -1674,11 +1674,11 @@ impl Render for ProjectSearchBar {
                 ),
         );
 
-        let mode_column = v_stack().items_start().justify_start().child(
+        let mode_column = v_flex().items_start().justify_start().child(
-            h_stack()
+            h_flex()
                 .gap_2()
                 .child(
-                    h_stack()
+                    h_flex()
                         .child(
                             ToggleButton::new("project-search-text-button", "Text")
                                 .style(ButtonStyle::Filled)
@@ -1744,7 +1744,7 @@ impl Render for ProjectSearchBar {
                 ),
         );
         let replace_column = if search.replace_enabled {
-            h_stack()
+            h_flex()
                 .flex_1()
                 .h_full()
                 .gap_2()
@@ -1757,9 +1757,9 @@ impl Render for ProjectSearchBar {
                 .child(self.render_text_input(&search.replacement_editor, cx))
         } else {
             // Fill out the space if we don't have a replacement editor.
-            h_stack().flex_1()
+            h_flex().flex_1()
         };
-        let actions_column = h_stack()
+        let actions_column = h_flex()
             .when(search.replace_enabled, |this| {
                 this.child(
                     IconButton::new("project-search-replace-next", IconName::ReplaceNext)
@@ -1820,7 +1820,7 @@ impl Render for ProjectSearchBar {
                     .tooltip(|cx| Tooltip::for_action("Go to next match", &SelectNextMatch, cx)),
             );
 
-        v_stack()
+        v_flex()
             .key_context(key_context)
             .flex_grow()
             .gap_2()
@@ -1880,7 +1880,7 @@ impl Render for ProjectSearchBar {
                 })
             })
             .child(
-                h_stack()
+                h_flex()
                     .justify_between()
                     .gap_2()
                     .child(query_column)
@@ -1890,12 +1890,12 @@ impl Render for ProjectSearchBar {
             )
             .when(search.filters_enabled, |this| {
                 this.child(
-                    h_stack()
+                    h_flex()
                         .flex_1()
                         .gap_2()
                         .justify_between()
                         .child(
-                            h_stack()
+                            h_flex()
                                 .flex_1()
                                 .h_full()
                                 .px_2()
@@ -1921,7 +1921,7 @@ impl Render for ProjectSearchBar {
                                 }),
                         )
                         .child(
-                            h_stack()
+                            h_flex()
                                 .flex_1()
                                 .h_full()
                                 .px_2()

crates/story/src/story.rs

@@ -255,8 +255,8 @@ impl Story {
             .child(label.into())
     }
 
-    /// Note: Not ui::v_stack() as the story crate doesn't depend on the ui crate.
+    /// Note: Not `ui::v_flex` as the `story` crate doesn't depend on the `ui` crate.
-    pub fn v_stack() -> Div {
+    pub fn v_flex() -> Div {
         div().flex().flex_col().gap_1()
     }
 }
@@ -298,7 +298,7 @@ impl RenderOnce for StoryItem {
             .gap_4()
             .w_full()
             .child(
-                Story::v_stack()
+                Story::v_flex()
                     .px_2()
                     .w_1_2()
                     .min_h_px()
@@ -319,7 +319,7 @@ impl RenderOnce for StoryItem {
                     }),
             )
             .child(
-                Story::v_stack()
+                Story::v_flex()
                     .px_2()
                     .flex_none()
                     .w_1_2()

crates/storybook/src/stories/overflow_scroll.rs

@@ -11,7 +11,7 @@ impl Render for OverflowScrollStory {
             .child(Story::title("Overflow Scroll"))
             .child(Story::label("`overflow_x_scroll`"))
             .child(
-                h_stack()
+                h_flex()
                     .id("overflow_x_scroll")
                     .gap_2()
                     .overflow_x_scroll()
@@ -24,7 +24,7 @@ impl Render for OverflowScrollStory {
             )
             .child(Story::label("`overflow_y_scroll`"))
             .child(
-                v_stack()
+                v_flex()
                     .id("overflow_y_scroll")
                     .gap_2()
                     .overflow_y_scroll()

crates/storybook/src/stories/text.rs

@@ -117,7 +117,7 @@ impl Render for TextStory {
 //     type Element = Div;
 
 //     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
-//         v_stack()
+//         v_flex()
 //             .bg(blue())
 //             .child(
 //                 div()

crates/terminal_view/src/terminal_panel.rs

@@ -13,7 +13,7 @@ use search::{buffer_search::DivRegistrar, BufferSearchBar};
 use serde::{Deserialize, Serialize};
 use settings::Settings;
 use terminal::terminal_settings::{TerminalDockPosition, TerminalSettings};
-use ui::{h_stack, ButtonCommon, Clickable, IconButton, IconSize, Selectable, Tooltip};
+use ui::{h_flex, ButtonCommon, Clickable, IconButton, IconSize, Selectable, Tooltip};
 use util::{ResultExt, TryFutureExt};
 use workspace::{
     dock::{DockPosition, Panel, PanelEvent},
@@ -68,7 +68,7 @@ impl TerminalPanel {
             pane.display_nav_history_buttons(false);
             pane.set_render_tab_bar_buttons(cx, move |pane, cx| {
                 let terminal_panel = terminal_panel.clone();
-                h_stack()
+                h_flex()
                     .gap_2()
                     .child(
                         IconButton::new("plus", IconName::Plus)

crates/terminal_view/src/terminal_view.rs

@@ -20,7 +20,7 @@ use terminal::{
     Clear, Copy, Event, MaybeNavigationTarget, Paste, ShowCharacterPalette, Terminal,
 };
 use terminal_element::TerminalElement;
-use ui::{h_stack, prelude::*, ContextMenu, Icon, IconName, Label};
+use ui::{h_flex, prelude::*, ContextMenu, Icon, IconName, Label};
 use util::{paths::PathLikeWithPosition, ResultExt};
 use workspace::{
     item::{BreadcrumbText, Item, ItemEvent},
@@ -697,7 +697,7 @@ impl Item for TerminalView {
         cx: &WindowContext,
     ) -> AnyElement {
         let title = self.terminal().read(cx).title(true);
-        h_stack()
+        h_flex()
             .gap_2()
             .child(Icon::new(IconName::Terminal))
             .child(Label::new(title).color(if selected {

crates/theme_selector/src/theme_selector.rs

@@ -10,7 +10,7 @@ use picker::{Picker, PickerDelegate};
 use settings::{update_settings_file, SettingsStore};
 use std::sync::Arc;
 use theme::{Theme, ThemeMeta, ThemeRegistry, ThemeSettings};
-use ui::{prelude::*, v_stack, ListItem, ListItemSpacing};
+use ui::{prelude::*, v_flex, ListItem, ListItemSpacing};
 use util::ResultExt;
 use workspace::{ui::HighlightedLabel, ModalView, Workspace};
 
@@ -70,7 +70,7 @@ impl FocusableView for ThemeSelector {
 
 impl Render for ThemeSelector {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack().w(rems(34.)).child(self.picker.clone())
+        v_flex().w(rems(34.)).child(self.picker.clone())
     }
 }
 

crates/ui/src/components/button/button.rs

@@ -362,7 +362,7 @@ impl RenderOnce for Button {
         };
 
         self.base.child(
-            h_stack()
+            h_flex()
                 .gap_1()
                 .when(self.icon_position == Some(IconPosition::Start), |this| {
                     this.children(self.icon.map(|icon| {
@@ -375,7 +375,7 @@ impl RenderOnce for Button {
                     }))
                 })
                 .child(
-                    h_stack()
+                    h_flex()
                         .gap_2()
                         .justify_between()
                         .child(

crates/ui/src/components/checkbox.rs

@@ -103,7 +103,7 @@ impl RenderOnce for Checkbox {
             ),
         };
 
-        h_stack()
+        h_flex()
             .id(self.id)
             // Rather than adding `px_1()` to add some space around the checkbox,
             // we use a larger parent element to create a slightly larger

crates/ui/src/components/context_menu.rs

@@ -1,5 +1,5 @@
 use crate::{
-    h_stack, prelude::*, v_stack, Icon, IconName, KeyBinding, Label, List, ListItem, ListSeparator,
+    h_flex, prelude::*, v_flex, Icon, IconName, KeyBinding, Label, List, ListItem, ListSeparator,
     ListSubHeader,
 };
 use gpui::{
@@ -234,7 +234,7 @@ impl ContextMenuItem {
 impl Render for ContextMenu {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         div().elevation_2(cx).flex().flex_row().child(
-            v_stack()
+            v_flex()
                 .min_w(px(200.))
                 .track_focus(&self.focus_handle)
                 .on_mouse_down_out(cx.listener(|this, _, cx| this.cancel(&menu::Cancel, cx)))
@@ -277,7 +277,7 @@ impl Render for ContextMenu {
                             let menu = cx.view().downgrade();
 
                             let label_element = if let Some(icon) = icon {
-                                h_stack()
+                                h_flex()
                                     .gap_1()
                                     .child(Label::new(label.clone()))
                                     .child(Icon::new(*icon))
@@ -298,7 +298,7 @@ impl Render for ContextMenu {
                                     .ok();
                                 })
                                 .child(
-                                    h_stack()
+                                    h_flex()
                                         .w_full()
                                         .justify_between()
                                         .child(label_element)

crates/ui/src/components/keybinding.rs

@@ -1,4 +1,4 @@
-use crate::{h_stack, prelude::*, Icon, IconName, IconSize};
+use crate::{h_flex, prelude::*, Icon, IconName, IconSize};
 use gpui::{relative, rems, Action, FocusHandle, IntoElement, Keystroke};
 
 #[derive(IntoElement, Clone)]
@@ -12,13 +12,13 @@ pub struct KeyBinding {
 
 impl RenderOnce for KeyBinding {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        h_stack()
+        h_flex()
             .flex_none()
             .gap_2()
             .children(self.key_binding.keystrokes().iter().map(|keystroke| {
                 let key_icon = Self::icon_for_key(&keystroke);
 
-                h_stack()
+                h_flex()
                     .flex_none()
                     .gap_0p5()
                     .p_0p5()

crates/ui/src/components/list/list.rs

@@ -1,7 +1,7 @@
 use gpui::AnyElement;
 use smallvec::SmallVec;
 
-use crate::{prelude::*, v_stack, Label, ListHeader};
+use crate::{prelude::*, v_flex, Label, ListHeader};
 
 #[derive(IntoElement)]
 pub struct List {
@@ -47,7 +47,7 @@ impl ParentElement for List {
 
 impl RenderOnce for List {
     fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
-        v_stack().w_full().py_1().children(self.header).map(|this| {
+        v_flex().w_full().py_1().children(self.header).map(|this| {
             match (self.children.is_empty(), self.toggle) {
                 (false, _) => this.children(self.children),
                 (true, Some(false)) => this,

crates/ui/src/components/list/list_header.rs

@@ -1,4 +1,4 @@
-use crate::{h_stack, prelude::*, Disclosure, Label};
+use crate::{h_flex, prelude::*, Disclosure, Label};
 use gpui::{AnyElement, ClickEvent};
 
 #[derive(IntoElement)]
@@ -76,7 +76,7 @@ impl Selectable for ListHeader {
 
 impl RenderOnce for ListHeader {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        h_stack()
+        h_flex()
             .id(self.label.clone())
             .w_full()
             .relative()
@@ -95,7 +95,7 @@ impl RenderOnce for ListHeader {
                     .w_full()
                     .gap_1()
                     .child(
-                        h_stack()
+                        h_flex()
                             .gap_1()
                             .children(self.toggle.map(|is_open| {
                                 Disclosure::new("toggle", is_open).on_toggle(self.on_toggle)
@@ -109,7 +109,7 @@ impl RenderOnce for ListHeader {
                                     .child(Label::new(self.label.clone()).color(Color::Muted)),
                             ),
                     )
-                    .child(h_stack().children(self.end_slot))
+                    .child(h_flex().children(self.end_slot))
                     .when_some(self.end_hover_slot, |this, end_hover_slot| {
                         this.child(
                             div()

crates/ui/src/components/list/list_item.rs

@@ -146,7 +146,7 @@ impl ParentElement for ListItem {
 
 impl RenderOnce for ListItem {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        h_stack()
+        h_flex()
             .id(self.id)
             .w_full()
             .relative()
@@ -169,7 +169,7 @@ impl RenderOnce for ListItem {
                     })
             })
             .child(
-                h_stack()
+                h_flex()
                     .id("inner_list_item")
                     .w_full()
                     .relative()
@@ -219,9 +219,9 @@ impl RenderOnce for ListItem {
                             .child(Disclosure::new("toggle", is_open).on_toggle(self.on_toggle))
                     }))
                     .child(
-                        h_stack()
+                        h_flex()
                             // 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`.
+                            // Without this the `h_flex` will overflow the parent `inner_list_item`.
                             .w_px()
                             .flex_1()
                             .gap_1()
@@ -230,7 +230,7 @@ impl RenderOnce for ListItem {
                     )
                     .when_some(self.end_slot, |this, end_slot| {
                         this.justify_between().child(
-                            h_stack()
+                            h_flex()
                                 .when(self.end_hover_slot.is_some(), |this| {
                                     this.visible()
                                         .group_hover("list_item", |this| this.invisible())
@@ -240,7 +240,7 @@ impl RenderOnce for ListItem {
                     })
                     .when_some(self.end_hover_slot, |this, end_hover_slot| {
                         this.child(
-                            h_stack()
+                            h_flex()
                                 .h_full()
                                 .absolute()
                                 .right_2()

crates/ui/src/components/list/list_sub_header.rs

@@ -1,5 +1,5 @@
 use crate::prelude::*;
-use crate::{h_stack, Icon, IconName, IconSize, Label};
+use crate::{h_flex, Icon, IconName, IconSize, Label};
 
 #[derive(IntoElement)]
 pub struct ListSubHeader {
@@ -25,7 +25,7 @@ impl ListSubHeader {
 
 impl RenderOnce for ListSubHeader {
     fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
-        h_stack().flex_1().w_full().relative().py_1().child(
+        h_flex().flex_1().w_full().relative().py_1().child(
             div()
                 .h_6()
                 .when(self.inset, |this| this.px_2())

crates/ui/src/components/popover.rs

@@ -1,5 +1,5 @@
 use crate::prelude::*;
-use crate::v_stack;
+use crate::v_flex;
 use gpui::{
     div, AnyElement, Element, IntoElement, ParentElement, RenderOnce, Styled, WindowContext,
 };
@@ -43,10 +43,10 @@ impl RenderOnce for Popover {
         div()
             .flex()
             .gap_1()
-            .child(v_stack().elevation_2(cx).px_1().children(self.children))
+            .child(v_flex().elevation_2(cx).px_1().children(self.children))
             .when_some(self.aside, |this, aside| {
                 this.child(
-                    v_stack()
+                    v_flex()
                         .elevation_2(cx)
                         .bg(cx.theme().colors().surface_background)
                         .px_1()

crates/ui/src/components/stack.rs

@@ -4,12 +4,12 @@ use crate::StyledExt;
 
 /// Horizontally stacks elements. Sets `flex()`, `flex_row()`, `items_center()`
 #[track_caller]
-pub fn h_stack() -> Div {
+pub fn h_flex() -> Div {
     div().h_flex()
 }
 
 /// Vertically stacks elements. Sets `flex()`, `flex_col()`
 #[track_caller]
-pub fn v_stack() -> Div {
+pub fn v_flex() -> Div {
     div().v_flex()
 }

crates/ui/src/components/stories/checkbox.rs

@@ -2,7 +2,7 @@ use gpui::{Render, ViewContext};
 use story::Story;
 
 use crate::prelude::*;
-use crate::{h_stack, Checkbox};
+use crate::{h_flex, Checkbox};
 
 pub struct CheckboxStory;
 
@@ -12,7 +12,7 @@ impl Render for CheckboxStory {
             .child(Story::title_for::<Checkbox>())
             .child(Story::label("Default"))
             .child(
-                h_stack()
+                h_flex()
                     .p_2()
                     .gap_2()
                     .rounded_md()
@@ -27,7 +27,7 @@ impl Render for CheckboxStory {
             )
             .child(Story::label("Disabled"))
             .child(
-                h_stack()
+                h_flex()
                     .p_2()
                     .gap_2()
                     .rounded_md()

crates/ui/src/components/stories/list_item.rs

@@ -60,7 +60,7 @@ impl Render for ListItemStory {
                 ListItem::new("with_end_hover_slot")
                     .child("Hello, world!")
                     .end_slot(
-                        h_stack()
+                        h_flex()
                             .gap_2()
                             .child(Avatar::new(SharedUrl::from(
                                 "https://avatars.githubusercontent.com/u/1789?v=4",

crates/ui/src/components/stories/tab.rs

@@ -13,10 +13,10 @@ impl Render for TabStory {
         Story::container()
             .child(Story::title_for::<Tab>())
             .child(Story::label("Default"))
-            .child(h_stack().child(Tab::new("tab_1").child("Tab 1")))
+            .child(h_flex().child(Tab::new("tab_1").child("Tab 1")))
             .child(Story::label("With indicator"))
             .child(
-                h_stack().child(
+                h_flex().child(
                     Tab::new("tab_1")
                         .start_slot(Indicator::dot().color(Color::Warning))
                         .child("Tab 1"),
@@ -24,7 +24,7 @@ impl Render for TabStory {
             )
             .child(Story::label("With close button"))
             .child(
-                h_stack().child(
+                h_flex().child(
                     Tab::new("tab_1")
                         .end_slot(
                             IconButton::new("close_button", IconName::Close)
@@ -38,13 +38,13 @@ impl Render for TabStory {
             )
             .child(Story::label("List of tabs"))
             .child(
-                h_stack()
+                h_flex()
                     .child(Tab::new("tab_1").child("Tab 1"))
                     .child(Tab::new("tab_2").child("Tab 2")),
             )
             .child(Story::label("List of tabs with first tab selected"))
             .child(
-                h_stack()
+                h_flex()
                     .child(
                         Tab::new("tab_1")
                             .selected(true)
@@ -65,7 +65,7 @@ impl Render for TabStory {
             )
             .child(Story::label("List of tabs with last tab selected"))
             .child(
-                h_stack()
+                h_flex()
                     .child(
                         Tab::new("tab_1")
                             .position(TabPosition::First)
@@ -90,7 +90,7 @@ impl Render for TabStory {
             )
             .child(Story::label("List of tabs with second tab selected"))
             .child(
-                h_stack()
+                h_flex()
                     .child(
                         Tab::new("tab_1")
                             .position(TabPosition::First)

crates/ui/src/components/stories/tab_bar.rs

@@ -35,7 +35,7 @@ impl Render for TabBarStory {
             .child(Story::title_for::<TabBar>())
             .child(Story::label("Default"))
             .child(
-                h_stack().child(
+                h_flex().child(
                     TabBar::new("tab_bar_1")
                         .start_child(
                             IconButton::new("navigate_backward", IconName::ArrowLeft)

crates/ui/src/components/stories/toggle_button.rs

@@ -25,7 +25,7 @@ impl Render for ToggleButtonStory {
             StorySection::new().child(
                 StoryItem::new(
                     "Toggle button group",
-                    h_stack()
+                    h_flex()
                         .child(
                             ToggleButton::new(1, "Apple")
                                 .style(ButtonStyle::Filled)
@@ -59,7 +59,7 @@ impl Render for ToggleButtonStory {
             StorySection::new().child(
                 StoryItem::new(
                     "Toggle button group with selection",
-                    h_stack()
+                    h_flex()
                         .child(
                             ToggleButton::new(1, "Apple")
                                 .style(ButtonStyle::Filled)

crates/ui/src/components/tab.rs

@@ -135,7 +135,7 @@ impl RenderOnce for Tab {
             })
             .cursor_pointer()
             .child(
-                h_stack()
+                h_flex()
                     .group("")
                     .relative()
                     .h_full()
@@ -145,7 +145,7 @@ impl RenderOnce for Tab {
                     // .hover(|style| style.bg(tab_hover_bg))
                     // .active(|style| style.bg(tab_active_bg))
                     .child(
-                        h_stack()
+                        h_flex()
                             .w_3()
                             .h_3()
                             .justify_center()
@@ -157,7 +157,7 @@ impl RenderOnce for Tab {
                             .children(self.start_slot),
                     )
                     .child(
-                        h_stack()
+                        h_flex()
                             .w_3()
                             .h_3()
                             .justify_center()

crates/ui/src/components/tab_bar.rs

@@ -102,7 +102,7 @@ impl RenderOnce for TabBar {
             .bg(cx.theme().colors().tab_bar_background)
             .when(!self.start_children.is_empty(), |this| {
                 this.child(
-                    h_stack()
+                    h_flex()
                         .flex_none()
                         .gap_1()
                         .px_1()
@@ -129,7 +129,7 @@ impl RenderOnce for TabBar {
                             .border_color(cx.theme().colors().border),
                     )
                     .child(
-                        h_stack()
+                        h_flex()
                             .id("tabs")
                             .z_index(2)
                             .flex_grow()
@@ -142,7 +142,7 @@ impl RenderOnce for TabBar {
             )
             .when(!self.end_children.is_empty(), |this| {
                 this.child(
-                    h_stack()
+                    h_flex()
                         .flex_none()
                         .gap_1()
                         .px_1()

crates/ui/src/components/tooltip.rs

@@ -3,7 +3,7 @@ use settings::Settings;
 use theme::ThemeSettings;
 
 use crate::prelude::*;
-use crate::{h_stack, v_stack, Color, KeyBinding, Label, LabelSize, StyledExt};
+use crate::{h_flex, v_flex, Color, KeyBinding, Label, LabelSize, StyledExt};
 
 pub struct Tooltip {
     title: SharedString,
@@ -73,7 +73,7 @@ impl Render for Tooltip {
         overlay().child(
             // padding to avoid mouse cursor
             div().pl_2().pt_2p5().child(
-                v_stack()
+                v_flex()
                     .elevation_2(cx)
                     .font(ui_font)
                     .text_ui()
@@ -81,7 +81,7 @@ impl Render for Tooltip {
                     .py_1()
                     .px_2()
                     .child(
-                        h_stack()
+                        h_flex()
                             .gap_4()
                             .child(self.title.clone())
                             .when_some(self.key_binding.clone(), |this, key_binding| {

crates/ui/src/prelude.rs

@@ -13,7 +13,7 @@ pub use crate::fixed::*;
 pub use crate::selectable::*;
 pub use crate::styles::{vh, vw};
 pub use crate::visible_on_hover::*;
-pub use crate::{h_stack, v_stack};
+pub use crate::{h_flex, v_flex};
 pub use crate::{Button, ButtonSize, ButtonStyle, IconButton, SelectableButton};
 pub use crate::{ButtonCommon, Color, StyledExt};
 pub use crate::{Headline, HeadlineSize};

crates/vcs_menu/src/lib.rs

@@ -9,7 +9,7 @@ use gpui::{
 use picker::{Picker, PickerDelegate};
 use std::{ops::Not, sync::Arc};
 use ui::{
-    h_stack, v_stack, Button, ButtonCommon, Clickable, HighlightedLabel, Label, LabelCommon,
+    h_flex, v_flex, Button, ButtonCommon, Clickable, HighlightedLabel, Label, LabelCommon,
     LabelSize, ListItem, ListItemSpacing, Selectable,
 };
 use util::ResultExt;
@@ -65,7 +65,7 @@ impl FocusableView for BranchList {
 
 impl Render for BranchList {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack()
+        v_flex()
             .w(rems(self.rem_width))
             .child(self.picker.clone())
             .on_mouse_down_out(cx.listener(|this, _, cx| {
@@ -290,7 +290,7 @@ impl PickerDelegate for BranchListDelegate {
     }
     fn render_header(&self, _: &mut ViewContext<Picker<Self>>) -> Option<AnyElement> {
         let label = if self.last_query.is_empty() {
-            h_stack()
+            h_flex()
                 .ml_3()
                 .child(Label::new("Recent branches").size(LabelSize::Small))
         } else {
@@ -298,7 +298,7 @@ impl PickerDelegate for BranchListDelegate {
                 let suffix = if self.matches.len() == 1 { "" } else { "es" };
                 Label::new(format!("{} match{}", self.matches.len(), suffix)).size(LabelSize::Small)
             });
-            h_stack()
+            h_flex()
                 .px_3()
                 .h_full()
                 .justify_between()
@@ -313,7 +313,7 @@ impl PickerDelegate for BranchListDelegate {
         }
 
         Some(
-            h_stack().mr_3().pb_2().child(h_stack().w_full()).child(
+            h_flex().mr_3().pb_2().child(h_flex().w_full()).child(
             Button::new("branch-picker-create-branch-button", "Create branch").on_click(
                 cx.listener(|_, _, cx| {
                     cx.spawn(|picker, mut cx| async move {

crates/welcome/src/base_keymap_picker.rs

@@ -62,7 +62,7 @@ impl BaseKeymapSelector {
 
 impl Render for BaseKeymapSelector {
     fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack().w(rems(34.)).child(self.picker.clone())
+        v_flex().w(rems(34.)).child(self.picker.clone())
     }
 }
 

crates/welcome/src/welcome.rs

@@ -60,8 +60,8 @@ pub struct WelcomePage {
 
 impl Render for WelcomePage {
     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
-        h_stack().full().track_focus(&self.focus_handle).child(
+        h_flex().full().track_focus(&self.focus_handle).child(
-            v_stack()
+            v_flex()
                 .w_96()
                 .gap_4()
                 .mx_auto()
@@ -74,12 +74,12 @@ impl Render for WelcomePage {
                         .mx_auto(),
                 )
                 .child(
-                    h_stack()
+                    h_flex()
                         .justify_center()
                         .child(Label::new("Code at the speed of thought")),
                 )
                 .child(
-                    v_stack()
+                    v_flex()
                         .gap_2()
                         .child(
                             Button::new("choose-theme", "Choose a theme")
@@ -129,7 +129,7 @@ impl Render for WelcomePage {
                         ),
                 )
                 .child(
-                    v_stack()
+                    v_flex()
                         .p_3()
                         .gap_2()
                         .bg(cx.theme().colors().elevated_surface_background)
@@ -137,7 +137,7 @@ impl Render for WelcomePage {
                         .border_color(cx.theme().colors().border)
                         .rounded_md()
                         .child(
-                            h_stack()
+                            h_flex()
                                 .gap_2()
                                 .child(
                                     Checkbox::new(
@@ -163,7 +163,7 @@ impl Render for WelcomePage {
                                 .child(Label::new("Enable vim mode")),
                         )
                         .child(
-                            h_stack()
+                            h_flex()
                                 .gap_2()
                                 .child(
                                     Checkbox::new(
@@ -201,7 +201,7 @@ impl Render for WelcomePage {
                                 .child(Label::new("Send anonymous usage data")),
                         )
                         .child(
-                            h_stack()
+                            h_flex()
                                 .gap_2()
                                 .child(
                                     Checkbox::new(

crates/workspace/src/dock.rs

@@ -9,7 +9,7 @@ use schemars::JsonSchema;
 use serde::{Deserialize, Serialize};
 use settings::SettingsStore;
 use std::sync::Arc;
-use ui::{h_stack, ContextMenu, IconButton, Tooltip};
+use ui::{h_flex, ContextMenu, IconButton, Tooltip};
 use ui::{prelude::*, right_click_menu};
 
 const RESIZE_HANDLE_SIZE: Pixels = Pixels(6.);
@@ -682,7 +682,7 @@ impl Render for PanelButtons {
                 )
             });
 
-        h_stack().gap_0p5().children(buttons)
+        h_flex().gap_0p5().children(buttons)
     }
 }
 

crates/workspace/src/modal_layer.rs

@@ -2,7 +2,7 @@ use gpui::{
     div, prelude::*, px, AnyView, DismissEvent, FocusHandle, ManagedView, Render, Subscription,
     View, ViewContext, WindowContext,
 };
-use ui::{h_stack, v_stack};
+use ui::{h_flex, v_flex};
 
 pub trait ModalView: ManagedView {
     fn on_before_dismiss(&mut self, _: &mut ViewContext<Self>) -> bool {
@@ -120,7 +120,7 @@ impl Render for ModalLayer {
             .left_0()
             .z_index(169)
             .child(
-                v_stack()
+                v_flex()
                     .h(px(0.0))
                     .top_20()
                     .flex()
@@ -128,7 +128,7 @@ impl Render for ModalLayer {
                     .items_center()
                     .track_focus(&active_modal.focus_handle)
                     .child(
-                        h_stack()
+                        h_flex()
                             .on_mouse_down_out(cx.listener(|this, _, cx| {
                                 this.hide_modal(cx);
                             }))

crates/workspace/src/notifications.rs

@@ -173,7 +173,7 @@ pub mod simple_message_notification {
     };
     use std::sync::Arc;
     use ui::prelude::*;
-    use ui::{h_stack, v_stack, Button, Icon, IconName, Label, StyledExt};
+    use ui::{h_flex, v_flex, Button, Icon, IconName, Label, StyledExt};
 
     pub struct MessageNotification {
         message: SharedString,
@@ -218,11 +218,11 @@ pub mod simple_message_notification {
 
     impl Render for MessageNotification {
         fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-            v_stack()
+            v_flex()
                 .elevation_3(cx)
                 .p_4()
                 .child(
-                    h_stack()
+                    h_flex()
                         .justify_between()
                         .child(div().max_w_80().child(Label::new(self.message.clone())))
                         .child(

crates/workspace/src/pane.rs

@@ -35,7 +35,7 @@ use ui::{
     prelude::*, right_click_menu, ButtonSize, Color, IconButton, IconButtonShape, IconName,
     IconSize, Indicator, Label, Tab, TabBar, TabPosition, Tooltip,
 };
-use ui::{v_stack, ContextMenu};
+use ui::{v_flex, ContextMenu};
 use util::{maybe, truncate_and_remove_front, ResultExt};
 
 #[derive(PartialEq, Clone, Copy, Deserialize, Debug)]
@@ -271,7 +271,7 @@ impl Pane {
             custom_drop_handle: None,
             can_split: true,
             render_tab_bar_buttons: Rc::new(move |pane, cx| {
-                h_stack()
+                h_flex()
                     .gap_2()
                     .child(
                         IconButton::new("plus", IconName::Plus)
@@ -1444,7 +1444,7 @@ impl Pane {
             .track_scroll(self.tab_bar_scroll_handle.clone())
             .when(self.display_nav_history_buttons, |tab_bar| {
                 tab_bar.start_child(
-                    h_stack()
+                    h_flex()
                         .gap_2()
                         .child(
                             IconButton::new("navigate_backward", IconName::ArrowLeft)
@@ -1718,7 +1718,7 @@ impl FocusableView for Pane {
 
 impl Render for Pane {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        v_stack()
+        v_flex()
             .key_context("Pane")
             .track_focus(&self.focus_handle)
             .size_full()

crates/workspace/src/shared_screen.rs

@@ -12,7 +12,7 @@ use gpui::{
     WindowContext,
 };
 use std::sync::{Arc, Weak};
-use ui::{h_stack, prelude::*, Icon, IconName, Label};
+use ui::{h_flex, prelude::*, Icon, IconName, Label};
 
 pub enum Event {
     Close,
@@ -98,7 +98,7 @@ impl Item for SharedScreen {
         selected: bool,
         _: &WindowContext<'_>,
     ) -> gpui::AnyElement {
-        h_stack()
+        h_flex()
             .gap_1()
             .child(Icon::new(IconName::Screen))
             .child(

crates/workspace/src/status_bar.rs

@@ -4,7 +4,7 @@ use gpui::{
     WindowContext,
 };
 use std::any::TypeId;
-use ui::{h_stack, prelude::*};
+use ui::{h_flex, prelude::*};
 use util::ResultExt;
 
 pub trait StatusItemView: Render {
@@ -50,14 +50,14 @@ impl Render for StatusBar {
 
 impl StatusBar {
     fn render_left_tools(&self, _: &mut ViewContext<Self>) -> impl IntoElement {
-        h_stack()
+        h_flex()
             .items_center()
             .gap_2()
             .children(self.left_items.iter().map(|item| item.to_any()))
     }
 
     fn render_right_tools(&self, _: &mut ViewContext<Self>) -> impl IntoElement {
-        h_stack()
+        h_flex()
             .items_center()
             .gap_2()
             .children(self.right_items.iter().rev().map(|item| item.to_any()))

crates/workspace/src/toolbar.rs

@@ -4,7 +4,7 @@ use gpui::{
     WindowContext,
 };
 use ui::prelude::*;
-use ui::{h_stack, v_stack};
+use ui::{h_flex, v_flex};
 
 pub enum ToolbarItemEvent {
     ChangeLocation(ToolbarItemLocation),
@@ -103,18 +103,18 @@ impl Render for Toolbar {
         let has_left_items = self.left_items().count() > 0;
         let has_right_items = self.right_items().count() > 0;
 
-        v_stack()
+        v_flex()
             .p_2()
             .when(has_left_items || has_right_items, |this| this.gap_2())
             .border_b()
             .border_color(cx.theme().colors().border_variant)
             .bg(cx.theme().colors().toolbar_background)
             .child(
-                h_stack()
+                h_flex()
                     .justify_between()
                     .when(has_left_items, |this| {
                         this.child(
-                            h_stack()
+                            h_flex()
                                 .flex_1()
                                 .justify_start()
                                 .children(self.left_items().map(|item| item.to_any())),
@@ -122,7 +122,7 @@ impl Render for Toolbar {
                     })
                     .when(has_right_items, |this| {
                         this.child(
-                            h_stack()
+                            h_flex()
                                 .flex_1()
                                 .justify_end()
                                 .children(self.right_items().map(|item| item.to_any())),