Narrow layouts: vertical ScrollArea, wrapping property rows, icon-only segments and tabs, shrinking status items, unfocused fields show their start

src/layout/mod.rs

@@ -2,6 +2,7 @@ mod collapse;
 mod dock;
 mod floating;
 mod grid;
+mod narrow;
 mod page;
 mod panes;
 mod scroll;
@@ -22,6 +23,7 @@ pub use dock::{Dock, DockLayout, DockPanel, DockSide, Spot};
 pub use floating::FloatingPanel;
 pub use grid::{Masonry, SimpleGrid};
 pub(crate) use grid::{columns_for, fit};
+pub(crate) use narrow::{measure_width, text_width};
 pub use page::{AppShell, MasterDetail, Page};
 pub use panes::{PaneGroup, PaneId, PaneLayout};
 pub use scroll::{ScrollArea, Scrollbar, on_axis};

src/layout/narrow.rs

@@ -0,0 +1,48 @@
+//! What a row of labels needs, and how wide it got.
+
+use gpui::{
+    App, Bounds, Entity, Font, FontWeight, Hsla, IntoElement, Pixels, SharedString, Styled,
+    TextRun, Window, canvas,
+};
+
+use crate::theme::{ActiveTheme, TextSize};
+
+/// `text` set in `size` and `weight`, in pixels.
+pub(crate) fn text_width(
+    text: &SharedString,
+    size: TextSize,
+    weight: FontWeight,
+    window: &Window,
+    cx: &App,
+) -> Pixels {
+    let font_size = cx.theme().text_size(size).to_pixels(window.rem_size());
+    let run = TextRun {
+        len: text.len(),
+        font: Font { weight, ..window.text_style().font() },
+        color: Hsla::default(),
+        background_color: None,
+        underline: None,
+        strikethrough: None,
+    };
+    window.text_system().shape_line(text.clone(), font_size, &[run], None).width
+}
+
+/// Keeps `width` at the parent's width; a change redraws once.
+pub(crate) fn measure_width(width: Entity<Pixels>) -> impl IntoElement {
+    canvas(
+        move |bounds: Bounds<Pixels>, window, cx| {
+            if *width.read(cx) != bounds.size.width {
+                width.update(cx, |width, cx| {
+                    *width = bounds.size.width;
+                    cx.notify();
+                    window.request_animation_frame();
+                });
+            }
+        },
+        |_, _, _, _| {},
+    )
+    .absolute()
+    .top_0()
+    .left_0()
+    .size_full()
+}

src/layout/scroll.rs

@@ -227,6 +227,7 @@ pub struct ScrollArea {
     id: ElementId,
     base: Div,
     shadows: bool,
+    vertical: bool,
     body: SmallVec<[AnyElement; 2]>,
 }
 
@@ -236,6 +237,7 @@ impl ScrollArea {
             id: id.into(),
             base: div(),
             shadows: false,
+            vertical: false,
             body: SmallVec::new(),
         }
     }
@@ -245,6 +247,12 @@ impl ScrollArea {
         self.shadows = true;
         self
     }
+
+    /// Scrolls down only; content keeps the area's width.
+    pub fn vertical(mut self) -> Self {
+        self.vertical = true;
+        self
+    }
 }
 
 impl Styled for ScrollArea {
@@ -300,12 +308,21 @@ impl RenderOnce for ScrollArea {
                 div()
                     .id("scroll-body")
                     .size_full()
-                    .overflow_scroll()
+                    .when(self.vertical, |body| body.overflow_y_scroll().overflow_x_hidden())
+                    .when(!self.vertical, |body| body.overflow_scroll())
                     .track_scroll(&handle)
-                    .children(self.body),
+                    .map(|body| match self.vertical {
+                        // Children fill and never widen, so rows wrap.
+                        true => body.flex().flex_col().children(
+                            self.body.into_iter().map(|child| div().w_full().min_w_0().child(child)),
+                        ),
+                        false => body.children(self.body),
+                    }),
             )
             .when(self.shadows, |area| area.child(ScrollShadow::new(&handle)))
             .child(Scrollbar::new("scrollbar-y", &handle, Axis::Vertical).presence(presence))
-            .child(Scrollbar::new("scrollbar-x", &handle, Axis::Horizontal).presence(presence))
+            .when(!self.vertical, |area| {
+                area.child(Scrollbar::new("scrollbar-x", &handle, Axis::Horizontal).presence(presence))
+            })
     }
 }