Fix inline assist layout issues related to screen size (#22732)

## Before


https://github.com/user-attachments/assets/c84f15d2-5643-46f2-9eb6-f0234c563c01

## After


https://github.com/user-attachments/assets/d4eab08a-1bd5-442c-9663-34bb512dba4b


Release Notes:

- N/A

---------

Co-authored-by: Marshall <marshall@zed.dev>
This commit is contained in:
Richard Feldman 2025-01-06 16:40:36 -05:00 committed by GitHub
parent 799e81ffe5
commit 2856d0a661
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -27,6 +27,7 @@ use settings::Settings;
use std::cmp; use std::cmp;
use std::sync::Arc; use std::sync::Arc;
use theme::ThemeSettings; use theme::ThemeSettings;
use ui::utils::WithRemSize;
use ui::{ use ui::{
prelude::*, CheckboxWithLabel, IconButtonShape, KeyBinding, Popover, PopoverMenuHandle, Tooltip, prelude::*, CheckboxWithLabel, IconButtonShape, KeyBinding, Popover, PopoverMenuHandle, Tooltip,
}; };
@ -54,9 +55,10 @@ impl<T: 'static> EventEmitter<PromptEditorEvent> for PromptEditor<T> {}
impl<T: 'static> Render for PromptEditor<T> { impl<T: 'static> Render for PromptEditor<T> {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement { fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let ui_font_size = ThemeSettings::get_global(cx).ui_font_size;
let mut buttons = Vec::new(); let mut buttons = Vec::new();
let left_gutter_spacing = match &self.mode { let left_gutter_width = match &self.mode {
PromptEditorMode::Buffer { PromptEditorMode::Buffer {
id: _, id: _,
codegen, codegen,
@ -109,9 +111,13 @@ impl<T: 'static> Render for PromptEditor<T> {
.capture_action(cx.listener(Self::cycle_prev)) .capture_action(cx.listener(Self::cycle_prev))
.capture_action(cx.listener(Self::cycle_next)) .capture_action(cx.listener(Self::cycle_next))
.child( .child(
h_flex() WithRemSize::new(ui_font_size)
.flex()
.flex_row()
.flex_shrink_0()
.items_center()
.h_full() .h_full()
.w(left_gutter_spacing) .w(left_gutter_width)
.justify_center() .justify_center()
.gap_2() .gap_2()
.child(self.render_close_button(cx)) .child(self.render_close_button(cx))
@ -171,19 +177,31 @@ impl<T: 'static> Render for PromptEditor<T> {
.w_full() .w_full()
.justify_between() .justify_between()
.child(div().flex_1().child(self.render_editor(cx))) .child(div().flex_1().child(self.render_editor(cx)))
.child(h_flex().gap_1().children(buttons)), .child(
WithRemSize::new(ui_font_size)
.flex()
.flex_row()
.items_center()
.gap_1()
.children(buttons),
),
), ),
) )
.child( .child(
h_flex().child(div().w(left_gutter_spacing)).child( WithRemSize::new(ui_font_size)
h_flex() .flex()
.w_full() .flex_row()
.pl_1() .items_center()
.items_start() .child(h_flex().flex_shrink_0().w(left_gutter_width))
.justify_between() .child(
.child(self.context_strip.clone()) h_flex()
.child(self.model_selector.clone()), .w_full()
), .pl_1()
.items_start()
.justify_between()
.child(self.context_strip.clone())
.child(self.model_selector.clone()),
),
) )
} }
} }
@ -680,9 +698,10 @@ impl<T: 'static> PromptEditor<T> {
let line_height = font_size.to_pixels(cx.rem_size()) * 1.3; let line_height = font_size.to_pixels(cx.rem_size()) * 1.3;
div() div()
.key_context("MessageEditor") .key_context("InlineAssistEditor")
.size_full() .size_full()
.p_2() .p_2()
.pl_1()
.bg(cx.theme().colors().editor_background) .bg(cx.theme().colors().editor_background)
.child({ .child({
let settings = ThemeSettings::get_global(cx); let settings = ThemeSettings::get_global(cx);