Skip to content

settings: Use vertical layout when container is small #2564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
huacnlee merged 2 commits into from
Jul 13, 2026
+119 −95
Merged

settings: Use vertical layout when container is small #2564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42d80cc
feat(settings): stack fields in narrow containers
huacnlee Jul 13, 2026
ace1b20
test(scroll): account for stretched GPUI roots
huacnlee Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 17 additions & 13 deletions crates/ui/src/scroll/scrollable.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,20 +325,24 @@ mod tests {
// Mimics Dialog: the panel height is auto (content-driven), the
// body is flex_1 + overflow_hidden, and the scrollable content
// should give the panel its intrinsic height.
crate::v_flex()
.w(px(200.))
.child(
crate::v_flex().flex_1().overflow_hidden().child(
div().flex_1().overflow_hidden().child(
crate::v_flex()
.size_full()
.overflow_y_scrollbar()
.child(plain_row(50.))
.child(plain_row(50.)),
// GPUI window roots with auto dimensions stretch to the viewport,
// so keep the auto-height panel below an explicit viewport root.
div().size_full().child(
crate::v_flex()
.w(px(200.))
.child(
crate::v_flex().flex_1().overflow_hidden().child(
div().flex_1().overflow_hidden().child(
crate::v_flex()
.size_full()
.overflow_y_scrollbar()
.child(plain_row(50.))
.child(plain_row(50.)),
),
),
),
)
.child(row("auto-height-footer", 10.))
)
.child(row("auto-height-footer", 10.)),
)
}
}

Expand Down
96 changes: 52 additions & 44 deletions crates/ui/src/setting/item.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,50 +263,58 @@ impl SettingItem {
disabled,
field,
..
} => div()
.w_full()
.overflow_hidden()
.when(disabled, |this| this.opacity(0.5))
.map(|this| {
if layout.is_horizontal() {
this.h_flex().justify_between().items_start()
} else {
this.v_flex()
}
})
.gap_3()
.child(
v_flex()
.map(|this| {
if layout.is_horizontal() {
this.flex_1().max_w_3_5()
} else {
this.w_full()
}
})
.gap_1()
.child(Label::new(title.clone()).text_sm())
.when_some(description.clone(), |this, description| {
this.child(
div()
.size_full()
.text_sm()
.text_color(cx.theme().muted_foreground)
.child(description),
)
}),
)
.child(div().id("field").child(Self::render_field(
field,
RenderOptions {
layout,
disabled,
..*options
},
window,
cx,
)))
.into_any_element(),
} => {
let layout = if options.layout.is_vertical() {
Axis::Vertical
} else {
layout
};

div()
.w_full()
.overflow_hidden()
.when(disabled, |this| this.opacity(0.5))
.map(|this| {
if layout.is_horizontal() {
this.h_flex().justify_between().items_start()
} else {
this.v_flex()
}
})
.gap_3()
.child(
v_flex()
.map(|this| {
if layout.is_horizontal() {
this.flex_1().max_w_3_5()
} else {
this.w_full()
}
})
.gap_1()
.child(Label::new(title).text_sm())
.when_some(description, |this, description| {
this.child(
div()
.size_full()
.text_sm()
.text_color(cx.theme().muted_foreground)
.child(description),
)
}),
)
.child(div().id("field").child(Self::render_field(
field,
RenderOptions {
layout,
disabled,
..*options
},
window,
cx,
)))
.into_any_element()
}
SettingItem::Element {
disabled, render, ..
} => div()
Expand Down
Loading
Loading