Add consistency between buffer and project search design (#20754)

Follow up to https://github.com/zed-industries/zed/pull/20242

This PR adds the `SearchInputWidth` util, which sets a threshold
container size in which an input's width stops filling the available
space. In practice, this is in place to make the buffer and project
search input fill the whole container width up to a certain point (where
this point is really an arbitrary number that can be fine-tuned per
taste). For folks using huge monitors, the UX isn't excellent if you
have a gigantic input.

In the future, upon further review, maybe it makes more sense to
reorganize this code better, baking it in as a default behavior of the
input component. Or even exposing this is a function many other
components could use, given we may want to have dynamic width in
different scenarios.

For now, I just wanted to make the design of these search UIs better and
more consistent.

| Buffer Search | Project Search |
|--------|--------|
| <img width="1042" alt="Screenshot 2024-11-15 at 20 39 21"
src="https://github.com/user-attachments/assets/f9cbf0b3-8c58-46d1-8380-e89cd9c89699">
| <img width="1042" alt="Screenshot 2024-11-15 at 20 39 24"
src="https://github.com/user-attachments/assets/ed244a51-ea55-4fe3-a719-a3d9cd119aa9">
|

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-11-28 13:39:49 -03:00 committed by GitHub
parent f30944543e
commit 301a8900a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 109 additions and 78 deletions

View file

@ -2,8 +2,10 @@
mod color_contrast;
mod format_distance;
mod search_input;
mod with_rem_size;
pub use color_contrast::*;
pub use format_distance::*;
pub use search_input::*;
pub use with_rem_size::*;

View file

@ -0,0 +1,22 @@
#![allow(missing_docs)]
use gpui::Pixels;
pub struct SearchInputWidth;
impl SearchInputWidth {
/// The containzer size in which the input stops filling the whole width.
pub const THRESHOLD_WIDTH: f32 = 1200.0;
/// The maximum width for the search input when the container is larger than the threshold.
pub const MAX_WIDTH: f32 = 1200.0;
/// Calculates the actual width in pixels based on the container width.
pub fn calc_width(container_width: Pixels) -> Pixels {
if container_width.0 < Self::THRESHOLD_WIDTH {
container_width
} else {
Pixels(container_width.0.min(Self::MAX_WIDTH))
}
}
}