Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

project_search: Ensure filter row aligns with other search rows (#29886)

Browse source 
Closes #29858 

This PR fixes the alignment-issue for the project saerch for cases where
the horizontally available space is large.

The issue arose because the two smaller editors within one line were
allowed to grow as much as the other editors on separate lines, up to
1200 pixels. However, these two editors should together only take up
1200 pixels at maximum, including the gap between them. To fix this, the
editors now live within one container element that grows at the same
rate as the other editors whilst allowing both editors to flex grow as
needed in the available space.

Current main:


https://github.com/user-attachments/assets/622016dc-70e5-455f-a7ba-5b69405d7e1e

This PR: 


https://github.com/user-attachments/assets/5244abf7-f0c0-4781-acb7-b774638d8a17

Release Notes:

- Improved project search input field alignment.
This commit is contained in:
Finn Evers 2025-05-05 08:35:48 +02:00 • committed by GitHub
parent 45fe158bc9
commit 0119b66426
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

59
crates/search/src/project_search.rs
View file

@ -1774,10 +1774,18 @@ impl Render for ProjectSearchBar {
let container_width = window.viewport_size().width;
let input_width = SearchInputWidth::calc_width(container_width);
let input_base_styles = || {
enum BaseStyle {
SingleInput,
MultipleInputs,
}
let input_base_styles = |base_style: BaseStyle| {
h_flex()
.min_w_32()
.w(input_width)
.map(|div| match base_style {
BaseStyle::SingleInput => div.w(input_width),
BaseStyle::MultipleInputs => div.flex_grow(),
})
.h_8()
.pl_2()
.pr_1()
@ -1787,7 +1795,7 @@ impl Render for ProjectSearchBar {
.rounded_lg()
};
let query_column = input_base_styles()
let query_column = input_base_styles(BaseStyle::SingleInput)
.on_action(cx.listener(|this, action, window, cx| this.confirm(action, window, cx)))
.on_action(cx.listener(|this, action, window, cx| {
this.previous_history_query(action, window, cx)
@ -1976,8 +1984,8 @@ impl Render for ProjectSearchBar {
.child(h_flex().min_w_64().child(mode_column).child(matches_column));
let replace_line = search.replace_enabled.then(|| {
let replace_column =
input_base_styles().child(self.render_text_input(&search.replacement_editor, cx));
let replace_column = input_base_styles(BaseStyle::SingleInput)
.child(self.render_text_input(&search.replacement_editor, cx));
let focus_handle = search.replacement_editor.read(cx).focus_handle(cx);
@ -2046,24 +2054,29 @@ impl Render for ProjectSearchBar {
.w_full()
.gap_2()
.child(
input_base_styles()
.on_action(cx.listener(|this, action, window, cx| {
this.previous_history_query(action, window, cx)
}))
.on_action(cx.listener(|this, action, window, cx| {
this.next_history_query(action, window, cx)
}))
.child(self.render_text_input(&search.included_files_editor, cx)),
)
.child(
input_base_styles()
.on_action(cx.listener(|this, action, window, cx| {
this.previous_history_query(action, window, cx)
}))
.on_action(cx.listener(|this, action, window, cx| {
this.next_history_query(action, window, cx)
}))
.child(self.render_text_input(&search.excluded_files_editor, cx)),
h_flex()
.gap_2()
.w(input_width)
.child(
input_base_styles(BaseStyle::MultipleInputs)
.on_action(cx.listener(|this, action, window, cx| {
this.previous_history_query(action, window, cx)
}))
.on_action(cx.listener(|this, action, window, cx| {
this.next_history_query(action, window, cx)
}))
.child(self.render_text_input(&search.included_files_editor, cx)),
)
.child(
input_base_styles(BaseStyle::MultipleInputs)
.on_action(cx.listener(|this, action, window, cx| {
this.previous_history_query(action, window, cx)
}))
.on_action(cx.listener(|this, action, window, cx| {
this.next_history_query(action, window, cx)
}))
.child(self.render_text_input(&search.excluded_files_editor, cx)),
),
)
.child(
h_flex()