Capture · Roots: roots drop w_full; hosts give the width

145 component roots drop w_full, the early returns included. Three
field rows keep it, Input, InputGroup and TagInput: stretched without
a width, taffy 0.9 laid the field's flex_1 share at no width in the
template picker at 280px, and the placeholder drew nothing. Container
keeps it, since mx_auto needs a width to fill.

Hosts that relied on a root's width now give it: MessageList boxes
each row at the list's width, the splash gives its bar the column's,
and test stages that mount a component as the window's root sit in a
size_full box. Tests hold a narrow row across the list and the splash
bar across its column; each goes red without its fix.

The gallery gains --narrow <px>, which lays each page in a padded
card at that width and shoots it without its script. The page
header wraps: the title takes the room and the theme switcher drops
below, where a long summary used to push it past the edge. A file
panel step waits for the panel to become key instead of a fixed
pause, which lost a race in a capture.

src/forms/catalogs.rs

@@ -138,13 +138,9 @@ impl RenderOnce for FontPicker {
         if let Some(on_change) = self.on_change {
             combobox = combobox.on_change(move |family, window, cx| on_change(family, window, cx));
         }
-        div()
-            .flex()
-            .flex_col()
-            .gap_2()
-            .w_full()
-            .child(combobox)
-            .when_some(self.selected, |picker, family| {
+        div().flex().flex_col().gap_2().child(combobox).when_some(
+            self.selected,
+            |picker, family| {
                 picker.child(
                     div()
                         .font_family(family)
@@ -152,7 +148,8 @@ impl RenderOnce for FontPicker {
                         .text_color(theme.colors.fg_muted)
                         .child("The quick brown fox jumps over the lazy dog"),
                 )
-            })
+            },
+        )
     }
 }
 

src/forms/code.rs

@@ -173,7 +173,6 @@ impl RenderOnce for CodeInput {
             "a code input is one line; JsonInput takes several"
         );
         div()
-            .w_full()
             .font_family(cx.theme().mono_family.clone())
             .child(Input::new(&self.state).size(self.size))
     }
@@ -205,7 +204,6 @@ impl RenderOnce for JsonInput {
             .flex()
             .flex_col()
             .gap_1()
-            .w_full()
             .child(
                 div()
                     .font_family(theme.mono_family.clone())

src/forms/color/gradient.rs

@@ -275,7 +275,6 @@ impl RenderOnce for GradientEditor {
             .flex()
             .flex_col()
             .gap_2()
-            .w_full()
             .child(
                 div()
                     .flex()

src/forms/color/picker.rs

@@ -375,7 +375,6 @@ impl RenderOnce for ColorPicker {
             .flex()
             .flex_col()
             .gap_3()
-            .w_full()
             .px(knob * 0.5)
             .pt(knob * 0.5)
             .child(plane)

src/forms/combobox.rs

@@ -214,7 +214,6 @@ impl RenderOnce for Combobox {
         div()
             .id(self.id.clone())
             .relative()
-            .w_full()
             .capture_action(move |_: &Up, _, cx| {
                 if open {
                     cx.stop_propagation();

src/forms/expression.rs

@@ -276,7 +276,6 @@ impl RenderOnce for ExpressionInput {
             .flex()
             .flex_col()
             .gap_1()
-            .w_full()
             .child(
                 div().font_family(mono).child(
                     Input::new(&self.state)

src/forms/hotkey.rs

@@ -58,7 +58,6 @@ impl RenderOnce for HotkeyInput {
             .items_center()
             .justify_between()
             .gap_2()
-            .w_full()
             .h(theme.control_height(ControlSize::Md))
             .px(theme.control_padding(ControlSize::Md))
             .rounded(theme.radius(Radius::Md))

src/forms/inline.rs

@@ -129,7 +129,6 @@ impl RenderOnce for InlineEdit {
             let (escape, enter) = (state.clone(), state.clone());
             return div()
                 .id(self.id)
-                .w_full()
                 .on_key_down(move |event, window, cx| {
                     if event.keystroke.key == "escape" {
                         cx.stop_propagation();

src/forms/masked.rs

@@ -270,7 +270,6 @@ impl RenderOnce for PhoneInput {
             );
         div()
             .relative()
-            .w_full()
             .child(MaskedInput::new(self.id.clone(), &self.state, mask).prefix(code))
             .child(
                 canvas(

src/forms/multi.rs

@@ -153,7 +153,6 @@ impl RenderOnce for MultiSelect {
             .flex_wrap()
             .items_center()
             .gap_1()
-            .w_full()
             .min_h(theme.control_height(self.size))
             .pl_1()
             .pr(theme.control_padding(self.size))

src/forms/pairs.rs

@@ -158,7 +158,6 @@ impl RenderOnce for FieldArray {
             .flex()
             .flex_col()
             .gap_2()
-            .w_full()
             .children(lines)
             .child(
                 div().flex().child(

src/forms/pattern.rs

@@ -136,7 +136,6 @@ impl RenderOnce for RegexInput {
             .flex()
             .flex_col()
             .gap_1()
-            .w_full()
             .child(
                 div().font_family(mono).child(
                     Input::new(&self.state)

src/forms/search.rs

@@ -81,7 +81,6 @@ impl RenderOnce for SearchInput {
         });
         div()
             .relative()
-            .w_full()
             .child(
                 Input::new(&self.state)
                     .size(self.size)

src/forms/signature.rs

@@ -260,7 +260,6 @@ impl RenderOnce for SignaturePad {
             .flex_col()
             .items_end()
             .gap_1()
-            .w_full()
             .child(pad)
             .child(
                 Button::new((self.id, "clear"), "Clear")

src/forms/structure.rs

@@ -55,7 +55,6 @@ impl RenderOnce for Form {
             .flex()
             .flex_col()
             .gap_8()
-            .w_full()
             .when_some(self.on_submit, |form, submit| {
                 form.capture_action(move |_: &Submit, window, cx| {
                     cx.stop_propagation();
@@ -102,7 +101,6 @@ impl RenderOnce for FormSection {
             .flex()
             .flex_col()
             .gap_4()
-            .w_full()
             .child(
                 div()
                     .flex()
@@ -304,7 +302,6 @@ impl RenderOnce for InlineForm {
             .flex_wrap()
             .items_end()
             .gap_3()
-            .w_full()
             .children(self.children)
     }
 }

src/forms/tests/colors.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    Context, Hsla, IntoElement, Modifiers, MouseButton, Render, TestAppContext, Window, point, px,
-    rgb, rgba,
+    Context, Hsla, IntoElement, Modifiers, MouseButton, ParentElement, Render, Styled,
+    TestAppContext, Window, div, point, px, rgb, rgba,
 };
 
 use super::setup;
@@ -13,14 +13,16 @@ struct Picked {
 impl Render for Picked {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let view = cx.entity();
-        ColorPicker::new("picked", self.color)
-            .opaque()
-            .on_change(move |color, _, cx| {
-                view.update(cx, |view, cx| {
-                    view.color = color;
-                    cx.notify();
-                })
-            })
+        div()
+            .size_full()
+            .child(ColorPicker::new("picked", self.color).opaque().on_change(
+                move |color, _, cx| {
+                    view.update(cx, |view, cx| {
+                        view.color = color;
+                        cx.notify();
+                    })
+                },
+            ))
     }
 }
 
@@ -41,12 +43,14 @@ struct Gradient {
 impl Render for Gradient {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let view = cx.entity();
-        GradientEditor::new("gradient", self.stops.clone()).on_change(move |next, _, cx| {
-            view.update(cx, |view, cx| {
-                view.stops = next.to_vec();
-                cx.notify();
-            })
-        })
+        div().size_full().child(
+            GradientEditor::new("gradient", self.stops.clone()).on_change(move |next, _, cx| {
+                view.update(cx, |view, cx| {
+                    view.stops = next.to_vec();
+                    cx.notify();
+                })
+            }),
+        )
     }
 }
 

src/forms/tests/other.rs

@@ -48,12 +48,16 @@ struct Pad {
 impl Render for Pad {
     fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let view = cx.entity();
-        SignaturePad::new("pad", self.strokes.clone()).on_change(move |next, _, cx| {
-            view.update(cx, |view, cx| {
-                view.strokes = next.to_vec();
-                cx.notify();
-            })
-        })
+        div()
+            .size_full()
+            .child(
+                SignaturePad::new("pad", self.strokes.clone()).on_change(move |next, _, cx| {
+                    view.update(cx, |view, cx| {
+                        view.strokes = next.to_vec();
+                        cx.notify();
+                    })
+                }),
+            )
     }
 }
 

src/forms/text/actions.rs

@@ -358,7 +358,6 @@ impl Render for TextInput {
             .id("ely-text-input")
             .key_context(CONTEXT)
             .track_focus(&self.focus)
-            .w_full()
             .cursor(if self.disabled {
                 CursorStyle::OperationNotAllowed
             } else {

src/forms/transfer.rs

@@ -181,7 +181,6 @@ impl RenderOnce for TransferList {
         div()
             .flex()
             .gap_3()
-            .w_full()
             .child(side("left", available_title, available, left, cx))
             .child(buttons)
             .child(side("right", chosen_title, picked, right, cx))