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/agent/changes.rs

@@ -119,7 +119,6 @@ impl RenderOnce for FileChangeCard {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .rounded(theme.radius(Radius::Md))
             .border_1()
             .border_color(colors.border)
@@ -270,7 +269,6 @@ impl RenderOnce for MultiFileDiffReview {
                 )
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/agent/control.rs

@@ -88,7 +88,6 @@ impl RenderOnce for HumanInputRequest {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()
@@ -177,7 +176,6 @@ impl RenderOnce for CostBreakdown {
             )
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/agent/environment.rs

@@ -117,7 +117,6 @@ impl RenderOnce for SandboxStatus {
         let live = matches!(self.state, SandboxState::Starting | SandboxState::Busy);
         let color = self.state.color(&colors);
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/agent/memory.rs

@@ -84,7 +84,6 @@ impl RenderOnce for MemoryPanel {
             )
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/agent/permission.rs

@@ -137,7 +137,6 @@ impl RenderOnce for PermissionPrompt {
                 })
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/agent/progress.rs

@@ -118,7 +118,6 @@ impl RenderOnce for AgentPlan {
             .filter(|(_, state)| *state == StepState::Done)
             .count();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()
@@ -284,7 +283,6 @@ impl RenderOnce for AgentProgress {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/agent/registry.rs

@@ -112,7 +112,6 @@ impl RenderOnce for ToolRegistry {
         let groups = grouped(&self.tools, &found(&self.tools, &self.query));
         let empty = groups.is_empty();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_4()

src/agent/tools.rs

@@ -109,7 +109,6 @@ impl RenderOnce for ToolCallCard {
                 .child(text)
         };
         div()
-            .w_full()
             .rounded(theme.radius(Radius::Md))
             .border_1()
             .border_color(colors.border)
@@ -217,7 +216,6 @@ impl RenderOnce for ToolCallGroup {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/calendar/agenda.rs

@@ -142,7 +142,6 @@ impl RenderOnce for AgendaView {
         if owners.is_empty() {
             return div()
                 .debug_selector(|| "agenda-none".into())
-                .w_full()
                 .py_6()
                 .flex()
                 .justify_center()
@@ -172,7 +171,6 @@ impl RenderOnce for AgendaView {
             })
         };
         div()
-            .w_full()
             .child(
                 sections
                     .selected(picked.read(cx).clone())

src/calendar/allday.rs

@@ -119,7 +119,6 @@ impl RenderOnce for AllDayRow {
         });
         div()
             .relative()
-            .w_full()
             .h(pad * 2.0 + pitch * lanes as f32 - gap)
             .border_b_1()
             .border_color(theme.colors.border)

src/calendar/chip.rs

@@ -93,7 +93,6 @@ impl RenderOnce for EventChip {
             .flex()
             .items_center()
             .gap_1()
-            .w_full()
             .h(theme.calendar().chip)
             .px_1p5()
             .rounded(round)

src/calendar/month.rs

@@ -420,7 +420,6 @@ impl RenderOnce for CalendarMonthView {
             .collect();
         let title = shown.strftime("%B %Y").to_string();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/calendar/people.rs

@@ -173,7 +173,6 @@ impl RenderOnce for AttendeeList {
             })
             .collect();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_1()

src/calendar/year.rs

@@ -300,7 +300,6 @@ impl RenderOnce for YearView {
             })
             .collect();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_4()

src/chat/actions.rs

@@ -74,7 +74,6 @@ impl RenderOnce for QuoteReply {
         let colors = theme.colors.clone();
         let line = self.text.lines().next().unwrap_or_default().to_string();
         div()
-            .w_full()
             .flex()
             .items_center()
             .gap_2()
@@ -261,7 +260,6 @@ impl RenderOnce for MessageEditor {
             self.on_cancel,
         );
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/chat/cite.rs

@@ -105,7 +105,6 @@ impl RenderOnce for SourceCard {
         let open = self.on_open;
         div()
             .id(self.id.clone())
-            .w_full()
             .p_2p5()
             .rounded(theme.radius(Radius::Md))
             .border_1()
@@ -222,7 +221,6 @@ impl RenderOnce for SourceList {
             .take(3)
             .collect();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/chat/code.rs

@@ -94,7 +94,6 @@ impl RenderOnce for CodeBlock {
         let lines = code.lines().count();
         let toggle = open.clone();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .rounded(theme.radius(Radius::Md))

src/chat/conversations.rs

@@ -179,7 +179,6 @@ impl RenderOnce for ConversationItem {
             .id(self.id.clone())
             .group(group.clone())
             .track_focus(&focus)
-            .w_full()
             .flex()
             .items_center()
             .gap_1()

src/chat/list.rs

@@ -105,7 +105,16 @@ impl RenderOnce for MessageList {
         div()
             .relative()
             .size_full()
-            .child(list(state, move |ix, window, cx| render(ix, window, cx)).size_full())
+            // gpui's list lays rows at content width.
+            .child(
+                list(state, move |ix, window, cx| {
+                    div()
+                        .w_full()
+                        .child(render(ix, window, cx))
+                        .into_any_element()
+                })
+                .size_full(),
+            )
             .child(
                 canvas(
                     move |_, window, cx| {
@@ -234,8 +243,10 @@ impl RenderOnce for DateSeparator {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         let rule = || div().flex_1().h_px().bg(colors.border);
+        let name = day_name(self.day, self.today);
+        let shown = format!("date-separator-{name}");
         div()
-            .w_full()
+            .debug_selector(move || shown)
             .flex()
             .items_center()
             .gap_3()
@@ -245,7 +256,7 @@ impl RenderOnce for DateSeparator {
                 div()
                     .text_size(theme.text_size(TextSize::Xs))
                     .text_color(colors.fg_subtle)
-                    .child(day_name(self.day, self.today)),
+                    .child(name),
             )
             .child(rule())
     }

src/chat/media.rs

@@ -72,7 +72,6 @@ impl RenderOnce for ImageMessage {
         let widest = theme.prose_width().to_pixels(window.rem_size());
         let open = self.on_open;
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_1()
@@ -235,7 +234,6 @@ impl RenderOnce for FileMessage {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .max_w(theme.prose_width())
             .flex()
             .items_center()
@@ -339,7 +337,6 @@ impl RenderOnce for LinkPreviewCard {
         let open = self.on_open;
         div()
             .id(self.id.clone())
-            .w_full()
             .max_w(theme.container_width(ContainerSize::Sm))
             .flex()
             .gap_3()

src/chat/params.rs

@@ -81,7 +81,6 @@ impl RenderOnce for ParameterPanel {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_4()
@@ -274,7 +273,6 @@ impl RenderOnce for SystemPromptEditor {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
         let theme = cx.theme();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/chat/play.rs

@@ -97,7 +97,6 @@ impl RenderOnce for AudioMessage {
         let playing = self.playing;
         let tall = theme.control_height(ControlSize::Md);
         div()
-            .w_full()
             .max_w(theme.prose_width())
             .flex()
             .items_center()

src/chat/projects.rs

@@ -62,7 +62,6 @@ impl RenderOnce for ProjectList {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_0p5()
@@ -163,7 +162,6 @@ impl RenderOnce for ProjectKnowledgePanel {
         let used: u64 = self.files.iter().map(|(_, bytes)| bytes).sum();
         let share = used as f32 / self.capacity as f32;
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/chat/search.rs

@@ -164,7 +164,6 @@ impl RenderOnce for WebResultCard {
         let open = self.on_open;
         div()
             .id(self.id.clone())
-            .w_full()
             .flex()
             .flex_col()
             .gap_0p5()
@@ -273,7 +272,6 @@ impl RenderOnce for DocumentChunkPreview {
             ..HighlightStyle::default()
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_1p5()

src/chat/status.rs

@@ -112,7 +112,6 @@ impl RenderOnce for RateLimitNotice {
             None => countdown,
         };
         div()
-            .w_full()
             .flex()
             .items_center()
             .gap_3()
@@ -198,7 +197,6 @@ impl RenderOnce for FeedbackForm {
         let ready = !self.picked.is_empty() || !self.note.read(cx).text().trim().is_empty();
         let (pick, send) = (self.on_pick, self.on_send);
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()
@@ -356,7 +354,6 @@ impl RenderOnce for ThinkingBlock {
             ThinkingDuration::new(self.took).into_any_element()
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/chat/tests/mod.rs

@@ -13,7 +13,8 @@ mod history;
 mod welcome;
 
 use super::{
-    ImageMessage, MessageAvatar, MessageBubble, MessageEditor, MessageList, Role, ThinkingBlock,
+    DateSeparator, ImageMessage, MessageAvatar, MessageBubble, MessageEditor, MessageList, Role,
+    ThinkingBlock,
 };
 use crate::{forms, forms::TextInput, theme::Theme};
 
@@ -361,3 +362,29 @@ fn the_reasoning_opens_from_the_keyboard(cx: &mut TestAppContext) {
         "Tab and Space open it: {closed:?} to {open:?}"
     );
 }
+
+struct Dated;
+
+impl Render for Dated {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        let day = jiff::civil::date(2026, 9, 28);
+        div()
+            .size_full()
+            .child(MessageList::new("dated", 1, move |_, _, _| {
+                DateSeparator::new(day, day).into_any_element()
+            }))
+    }
+}
+
+/// A row no wider than its words still spans the list.
+#[gpui::test]
+fn a_narrow_row_spans_the_list(cx: &mut TestAppContext) {
+    cx.update(Theme::init);
+    let (_, cx) = cx.add_window_view(|_, _| Dated);
+    settle(cx);
+    let row = cx
+        .debug_bounds("date-separator-Today")
+        .expect("the separator draws");
+    let width = cx.update(|window, _| window.viewport_size().width);
+    assert_eq!(row.size.width, width);
+}

src/chat/welcome.rs

@@ -180,7 +180,6 @@ impl RenderOnce for FollowUpSuggestions {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .children(
@@ -253,7 +252,6 @@ impl RenderOnce for CapabilityCards {
         let theme = cx.theme();
         let colors = theme.colors.clone();
         div()
-            .w_full()
             .grid()
             .grid_cols(3)
             .gap_3()

src/documents/blocks/tests.rs

@@ -12,12 +12,28 @@ fn open(
         forms::bind_keys(cx);
         crate::documents::bind_keys(cx);
     });
-    let (editor, cx) = cx.add_window_view(|window, cx| BlockEditor::new(blocks, window, cx));
+    let (full, cx) =
+        cx.add_window_view(|window, cx| Full(cx.new(|cx| BlockEditor::new(blocks, window, cx))));
+    let editor = full.read_with(cx, |full, _| full.0.clone());
     cx.update(|window, _| window.activate_window());
     settle(cx);
     (editor, cx)
 }
 
+/// The editor as a window's content, in the box that fills the window.
+struct Full(Entity<BlockEditor>);
+
+impl gpui::Render for Full {
+    fn render(
+        &mut self,
+        _: &mut gpui::Window,
+        _: &mut gpui::Context<Self>,
+    ) -> impl gpui::IntoElement {
+        use gpui::{ParentElement, Styled};
+        gpui::div().size_full().child(self.0.clone())
+    }
+}
+
 fn settle(cx: &mut VisualTestContext) {
     cx.run_until_parked();
     cx.update(|window, _| window.refresh());

src/documents/blocks/view.rs

@@ -253,7 +253,6 @@ impl Render for BlockEditor {
         let start = cx.entity();
         div()
             .id(id.clone())
-            .w_full()
             .flex()
             .flex_col()
             .capture_action(cx.listener(|editor, _: &Undo, window, cx| {

src/documents/pages.rs

@@ -108,7 +108,6 @@ impl RenderOnce for PageCover {
             .id(self.id.clone())
             .group(group.clone())
             .relative()
-            .w_full()
             .h(theme.page_cover())
             .child(
                 Image::new((self.id.clone(), "picture"), source(&self.source))

src/documents/reading.rs

@@ -208,27 +208,23 @@ impl RenderOnce for ReadingProgress {
         let theme = cx.theme();
         let (track, bar) = (theme.colors.border, theme.colors.accent);
         let scroll = self.scroll;
-        div()
-            .w_full()
-            .h(theme.progress_thickness())
-            .bg(track)
-            .child(
-                canvas(
-                    |_, _, _| {},
-                    move |bounds, _, window, _| {
-                        let share = read_share(
-                            f32::from(scroll.offset().y),
-                            f32::from(scroll.max_offset().height),
-                        );
-                        let filled = Bounds::new(
-                            bounds.origin,
-                            size(bounds.size.width * share, bounds.size.height),
-                        );
-                        window.paint_quad(fill(filled, bar));
-                    },
-                )
-                .size_full(),
+        div().h(theme.progress_thickness()).bg(track).child(
+            canvas(
+                |_, _, _| {},
+                move |bounds, _, window, _| {
+                    let share = read_share(
+                        f32::from(scroll.offset().y),
+                        f32::from(scroll.max_offset().height),
+                    );
+                    let filled = Bounds::new(
+                        bounds.origin,
+                        size(bounds.size.width * share, bounds.size.height),
+                    );
+                    window.paint_quad(fill(filled, bar));
+                },
             )
+            .size_full(),
+        )
     }
 }
 

src/feedback/messages.rs

@@ -166,7 +166,6 @@ impl RenderOnce for Banner {
             .items_center()
             .justify_center()
             .gap_2()
-            .w_full()
             .min_h(theme.control_height(ControlSize::Lg))
             .py_1()
             .px_10()

src/files/duplicates.rs

@@ -212,7 +212,6 @@ impl RenderOnce for DuplicateFinder {
         });
         div()
             .debug_selector(|| "duplicate-finder".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_4()

src/files/explorer.rs

@@ -278,7 +278,6 @@ impl RenderOnce for FileExplorer {
         };
         div()
             .debug_selector(|| "file-explorer".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/files/grid.rs

@@ -177,7 +177,6 @@ impl RenderOnce for FileGrid {
             .id(self.id)
             .debug_selector(|| "file-grid".into())
             .relative()
-            .w_full()
             .flex()
             .flex_wrap()
             .gap(gap)

src/files/operation.rs

@@ -174,7 +174,6 @@ impl RenderOnce for FileOperationProgress {
         );
         div()
             .debug_selector(|| "file-operation".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/files/preview.rs

@@ -122,7 +122,6 @@ impl RenderOnce for FilePreview {
         };
         div()
             .debug_selector(|| "file-preview".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/files/recent.rs

@@ -140,7 +140,6 @@ impl RenderOnce for RecentFiles {
         });
         div()
             .debug_selector(|| "recent-files".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_4()

src/files/search.rs

@@ -122,7 +122,6 @@ impl RenderOnce for FileSearch {
         };
         div()
             .debug_selector(|| "file-search".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/files/transfers.rs

@@ -80,7 +80,6 @@ impl RenderOnce for TransferQueue {
         let theme = cx.theme();
         div()
             .debug_selector(|| "transfer-queue".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_1()
@@ -192,7 +191,6 @@ impl RenderOnce for DownloadManager {
         });
         div()
             .debug_selector(|| "download-manager".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_1()

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))

src/generative/audio.rs

@@ -152,7 +152,6 @@ impl RenderOnce for AudioGenerationPlayer {
             }
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/generative/brush.rs

@@ -80,7 +80,6 @@ impl RenderOnce for MaskBrush {
             })
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/generative/compare.rs

@@ -168,7 +168,6 @@ impl RenderOnce for ABCompareView {
                 .collect(),
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/generative/downloads.rs

@@ -256,7 +256,7 @@ impl RenderOnce for ModelDownloadManager {
                 )
                 .children(bar)
         });
-        div().w_full().flex().flex_col().children(rows)
+        div().flex().flex_col().children(rows)
     }
 }
 

src/generative/embed.rs

@@ -313,12 +313,6 @@ impl RenderOnce for EmbeddingVisualizer {
                     cx.notify();
                 })
             });
-        div()
-            .w_full()
-            .flex()
-            .flex_col()
-            .gap_3()
-            .child(legend)
-            .child(area)
+        div().flex().flex_col().gap_3().child(legend).child(area)
     }
 }

src/generative/grid.rs

@@ -207,6 +207,6 @@ impl RenderOnce for GenerationGrid {
                     .children((0..short).map(|_| div().flex_1())),
             );
         }
-        div().w_full().flex().flex_col().gap_2().children(rows)
+        div().flex().flex_col().gap_2().children(rows)
     }
 }

src/generative/hardware.rs

@@ -45,8 +45,11 @@ impl HardwareMonitor {
 impl RenderOnce for HardwareMonitor {
     fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
         let spark = cx.theme().spark_size();
-        div().w_full().flex().flex_col().gap_3().children(
-            self.readings.into_iter().enumerate().map(|(ix, reading)| {
+        div()
+            .flex()
+            .flex_col()
+            .gap_3()
+            .children(self.readings.into_iter().enumerate().map(|(ix, reading)| {
                 div()
                     .flex()
                     .items_end()
@@ -71,7 +74,6 @@ impl RenderOnce for HardwareMonitor {
                                 .child(Sparkline::new(reading.history).area()),
                         )
                     })
-            }),
-        )
+            }))
     }
 }

src/generative/models.rs

@@ -95,7 +95,6 @@ impl RenderOnce for ModelCard {
                 })
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()
@@ -260,7 +259,6 @@ impl RenderOnce for ModelStatus {
             _ => None,
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/generative/playground.rs

@@ -154,7 +154,6 @@ impl RenderOnce for PromptPlayground {
             )
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/generative/prompt.rs

@@ -199,7 +199,6 @@ impl RenderOnce for PromptEnhancer {
                     ),
             );
         div()
-            .w_full()
             .flex()
             .flex_col()
             .child(Input::new(&self.field))

src/generative/ratio.rs

@@ -76,7 +76,6 @@ impl RenderOnce for AspectRatioPicker {
         let colors = theme.colors.clone();
         let glyph = theme.icon_size(IconSize::Md);
         div()
-            .w_full()
             .flex()
             .flex_wrap()
             .gap_2()

src/generative/style.rs

@@ -75,7 +75,6 @@ impl RenderOnce for StylePresetPicker {
         let colors = theme.colors.clone();
         let side = theme.generative().preset;
         div()
-            .w_full()
             .flex()
             .flex_wrap()
             .gap_3()

src/generative/tuning.rs

@@ -185,7 +185,6 @@ impl RenderOnce for FineTuneJobCard {
                 .h(theme.generative().loss)
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/generative/variation.rs

@@ -120,7 +120,6 @@ impl RenderOnce for VariationPicker {
             })
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/generative/versions.rs

@@ -84,7 +84,6 @@ impl RenderOnce for PromptDiff {
             Some((range, style))
         });
         div()
-            .w_full()
             .text_size(theme.text_size(TextSize::Sm))
             .text_color(colors.fg)
             .child(StyledText::new(text).with_highlights(styles))
@@ -251,7 +250,6 @@ impl RenderOnce for PromptVersionHistory {
             },
         );
         div()
-            .w_full()
             .flex()
             .flex_wrap()
             .items_start()

src/generative/video.rs

@@ -287,7 +287,6 @@ impl RenderOnce for VideoGenerationTimeline {
                 })
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/generative/voice.rs

@@ -224,6 +224,6 @@ impl RenderOnce for TTSVoicePicker {
                             .children(voice.tags.into_iter().map(Badge::new)),
                     )
             });
-        div().w_full().flex().flex_col().gap_0p5().children(rows)
+        div().flex().flex_col().gap_0p5().children(rows)
     }
 }

src/layout/grid.rs

@@ -87,7 +87,6 @@ impl RenderOnce for SimpleGrid {
         let columns = columns_for(*width.read(cx), self.min, self.gap);
         self.base
             .relative()
-            .w_full()
             .grid()
             .grid_cols(columns)
             .gap(self.gap)

src/lists/sections.rs

@@ -115,6 +115,6 @@ impl RenderOnce for Sections {
                             }),
                     )
             });
-        div().w_full().flex().flex_col().gap_4().children(sections)
+        div().flex().flex_col().gap_4().children(sections)
     }
 }

src/mail/boxes.rs

@@ -2,7 +2,7 @@ use std::rc::Rc;
 
 use gpui::{
     App, ElementId, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString,
-    Styled, Window, div,
+    Window, div,
 };
 
 use super::labels::hue_dot;
@@ -173,14 +173,11 @@ impl RenderOnce for MailboxList {
                 sections.section(title.clone(), rows)
             },
         );
-        div()
-            .debug_selector(|| "mailbox-list".into())
-            .w_full()
-            .child(
-                sections
-                    .selected(self.open)
-                    .on_select(open.clone())
-                    .on_activate(open),
-            )
+        div().debug_selector(|| "mailbox-list".into()).child(
+            sections
+                .selected(self.open)
+                .on_select(open.clone())
+                .on_activate(open),
+        )
     }
 }

src/mail/compose.rs

@@ -330,7 +330,6 @@ impl RenderOnce for MailComposer {
         });
         div()
             .debug_selector(|| "mail-composer".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/mail/labels.rs

@@ -240,7 +240,6 @@ impl RenderOnce for LabelPicker {
         let (up, down, chosen) = (finding.clone(), finding.clone(), finding);
         div()
             .id(self.id.clone())
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/mail/list.rs

@@ -290,7 +290,6 @@ impl RenderOnce for MailList {
         if self.mails.is_empty() {
             return div()
                 .debug_selector(|| "mail-none".into())
-                .w_full()
                 .px_3()
                 .py_4()
                 .text_size(theme.text_size(TextSize::Sm))
@@ -320,7 +319,6 @@ impl RenderOnce for MailList {
         let (id, on_select) = (self.id.clone(), self.on_select);
         div()
             .debug_selector(|| "mail-list".into())
-            .w_full()
             .child(
                 list.selected(self.selected)
                     .on_change(move |keys, window, cx| {

src/mail/reader.rs

@@ -344,7 +344,6 @@ impl RenderOnce for MailReader {
         let theme = cx.theme();
         div()
             .debug_selector(|| "mail-reader".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_4()

src/mail/signature.rs

@@ -124,7 +124,6 @@ impl RenderOnce for SignatureEditor {
         let words = input.read(cx).text().to_string();
         let theme = cx.theme();
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/mail/thread.rs

@@ -199,7 +199,6 @@ impl RenderOnce for MailThreadView {
         );
         div()
             .debug_selector(|| "mail-thread".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/media/annotate.rs

@@ -428,7 +428,6 @@ impl RenderOnce for ImageAnnotator {
                 })
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/media/audio.rs

@@ -145,7 +145,6 @@ impl RenderOnce for AudioWaveform {
             .id(self.id.clone())
             .debug_selector(|| "audio-waveform".into())
             .relative()
-            .w_full()
             .h(sizes.waveform)
             .border_1()
             .border_color(transparent_black())
@@ -226,7 +225,6 @@ impl RenderOnce for AudioSpectrum {
         let (color, round) = (theme.colors.fg_muted, theme.radius(Radius::Sm));
         div()
             .debug_selector(|| "audio-spectrum".into())
-            .w_full()
             .h(theme.media().waveform)
             .flex()
             .items_end()

src/media/controls.rs

@@ -92,7 +92,6 @@ impl RenderOnce for VolumeControl {
             None => slider,
         };
         div()
-            .w_full()
             .flex()
             .items_center()
             .gap_2()

src/media/cropper.rs

@@ -200,7 +200,6 @@ impl RenderOnce for ImageCropper {
         div()
             .id(self.id.clone())
             .relative()
-            .w_full()
             .p(side / 2.0)
             .border_1()
             .border_color(transparent_black())

src/media/listen.rs

@@ -251,7 +251,6 @@ impl RenderOnce for AudioPlayer {
         };
         let left = format!("-{}", clock(self.length - self.at));
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/media/record.rs

@@ -255,7 +255,6 @@ impl RenderOnce for MicLevelMeter {
         let (unlit, round) = (colors.border, theme.radius(Radius::Sm));
         div()
             .debug_selector(|| "mic-level".into())
-            .w_full()
             .h(theme.meter_track())
             .flex()
             .gap_0p5()

src/media/scrubber.rs

@@ -264,7 +264,6 @@ impl RenderOnce for Scrubber {
         div()
             .id(self.id.clone())
             .debug_selector(|| "scrubber".into())
-            .w_full()
             .px(thumb / 2.0)
             .rounded(theme.radius(Radius::Sm))
             .border_1()

src/media/strip.rs

@@ -251,7 +251,6 @@ impl RenderOnce for VideoThumbnailStrip {
         let (pressed_strip, moved_strip) = (strip.clone(), strip.clone());
         div()
             .id(self.id.clone())
-            .w_full()
             .px(handle / 2.0)
             .border_1()
             .border_color(transparent_black())

src/media/subtitles.rs

@@ -309,7 +309,6 @@ impl RenderOnce for SubtitleEditor {
                 })
         });
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_1()

src/media/thumbnail.rs

@@ -81,7 +81,6 @@ impl RenderOnce for ImageThumbnail {
             .children(label);
         div()
             .id(self.id)
-            .w_full()
             .rounded(outer)
             .border_1()
             .border_color(if self.selected {

src/media/upload.rs

@@ -189,7 +189,6 @@ impl RenderOnce for ImageUpload {
                 .into_any_element(),
         };
         div()
-            .w_full()
             .flex()
             .flex_col()
             .gap_3()

src/messaging/call.rs

@@ -206,7 +206,6 @@ impl RenderOnce for VoiceCallBar {
             .then(|| AvatarGroup::new(self.people).max(3).size(AvatarSize::Xs));
         div()
             .debug_selector(|| "voice-call-bar".into())
-            .w_full()
             .flex()
             .flex_wrap()
             .items_center()

src/messaging/channels.rs

@@ -272,14 +272,11 @@ impl RenderOnce for ChannelList {
                 sections.section(title, rows)
             },
         );
-        div()
-            .debug_selector(|| "channel-list".into())
-            .w_full()
-            .child(
-                sections
-                    .selected(self.open)
-                    .on_select(open.clone())
-                    .on_activate(open),
-            )
+        div().debug_selector(|| "channel-list".into()).child(
+            sections
+                .selected(self.open)
+                .on_select(open.clone())
+                .on_activate(open),
+        )
     }
 }

src/messaging/gifs.rs

@@ -295,7 +295,6 @@ impl RenderOnce for GifPicker {
             .then(|| Masonry::new((self.id.clone(), "gifs"), 2, gap).children(tiles));
         div()
             .debug_selector(|| "gif-picker".into())
-            .w_full()
             .flex()
             .flex_col()
             .gap_2()

src/messaging/header.rs

@@ -104,7 +104,6 @@ impl RenderOnce for ChannelHeader {
         };
         div()
             .debug_selector(|| "channel-header".into())
-            .w_full()
             .flex()
             .flex_wrap()
             .items_center()