Fix conversation selector popover menu offset (#22796)

Richard Feldman created 1 year ago

Before, the conversation popover menu covered up what you were typing
because it wasn't offset properly.

Now it's offset properly, using the UI font size so the amount of offset
scales with the font size:

<img width="435" alt="Screenshot 2025-01-07 at 4 34 27 PM"
src="https://github.com/user-attachments/assets/55e40910-8cd4-4548-b4fb-521eb2845775"
/>
<img width="454" alt="Screenshot 2025-01-07 at 4 33 58 PM"
src="https://github.com/user-attachments/assets/30350489-09f1-4cb8-9f95-ed4ee87bc110"
/>
<img width="488" alt="Screenshot 2025-01-07 at 4 34 18 PM"
src="https://github.com/user-attachments/assets/de60d990-2bd9-418d-a616-56beb3e4aa8a"
/>

Release Notes:

- N/A *or* Added/Fixed/Improved ...

Change summary

crates/assistant2/src/message_editor.rs  |  4 ++--
crates/gpui/src/elements/anchored.rs     | 18 ++++++++++++++++--
crates/ui/src/components/popover_menu.rs |  9 +++++----
3 files changed, 23 insertions(+), 8 deletions(-)

Detailed changes

crates/assistant2/src/message_editor.rs

@@ -10,7 +10,7 @@ use language_model::{LanguageModelRegistry, LanguageModelRequestTool};
 use language_model_selector::LanguageModelSelector;
 use rope::Point;
 use settings::Settings;
-use theme::ThemeSettings;
+use theme::{get_ui_font_size, ThemeSettings};
 use ui::{
     prelude::*, ButtonLike, ElevationIndex, KeyBinding, PopoverMenu, PopoverMenuHandle,
     SwitchWithLabel,
@@ -276,7 +276,7 @@ impl Render for MessageEditor {
                             .anchor(gpui::Corner::BottomLeft)
                             .offset(gpui::Point {
                                 x: px(0.0),
-                                y: px(-16.0),
+                                y: (-get_ui_font_size(cx) * 2) - px(4.0),
                             })
                             .with_handle(self.inline_context_picker_menu_handle.clone()),
                     )

crates/gpui/src/elements/anchored.rs

@@ -19,6 +19,7 @@ pub struct Anchored {
     fit_mode: AnchoredFitMode,
     anchor_position: Option<Point<Pixels>>,
     position_mode: AnchoredPositionMode,
+    offset: Option<Point<Pixels>>,
 }
 
 /// anchored gives you an element that will avoid overflowing the window bounds.
@@ -30,6 +31,7 @@ pub fn anchored() -> Anchored {
         fit_mode: AnchoredFitMode::SwitchAnchor,
         anchor_position: None,
         position_mode: AnchoredPositionMode::Window,
+        offset: None,
     }
 }
 
@@ -47,6 +49,13 @@ impl Anchored {
         self
     }
 
+    /// Offset the final position by this amount.
+    /// Useful when you want to anchor to an element but offset from it, such as in PopoverMenu.
+    pub fn offset(mut self, offset: Point<Pixels>) -> Self {
+        self.offset = Some(offset);
+        self
+    }
+
     /// Sets the position mode for this anchored element. Local will have this
     /// interpret its [`Anchored::position`] as relative to the parent element.
     /// While Window will have it interpret the position as relative to the window.
@@ -129,6 +138,7 @@ impl Element for Anchored {
             self.anchor_corner,
             size,
             bounds,
+            self.offset,
         );
 
         let limits = Bounds {
@@ -245,18 +255,22 @@ impl AnchoredPositionMode {
         anchor_corner: Corner,
         size: Size<Pixels>,
         bounds: Bounds<Pixels>,
+        offset: Option<Point<Pixels>>,
     ) -> (Point<Pixels>, Bounds<Pixels>) {
+        let offset = offset.unwrap_or_default();
+
         match self {
             AnchoredPositionMode::Window => {
                 let anchor_position = anchor_position.unwrap_or(bounds.origin);
-                let bounds = Bounds::from_corner_and_size(anchor_corner, anchor_position, size);
+                let bounds =
+                    Bounds::from_corner_and_size(anchor_corner, anchor_position + offset, size);
                 (anchor_position, bounds)
             }
             AnchoredPositionMode::Local => {
                 let anchor_position = anchor_position.unwrap_or_default();
                 let bounds = Bounds::from_corner_and_size(
                     anchor_corner,
-                    bounds.origin + anchor_position,
+                    bounds.origin + anchor_position + offset,
                     size,
                 );
                 (anchor_position, bounds)

crates/ui/src/components/popover_menu.rs

@@ -254,13 +254,14 @@ impl<M: ManagedView> Element for PopoverMenu<M> {
                 let mut menu_layout_id = None;
 
                 let menu_element = element_state.menu.borrow_mut().as_mut().map(|menu| {
+                    let offset = self.resolved_offset(cx);
                     let mut anchored = anchored()
                         .snap_to_window_with_margin(px(8.))
-                        .anchor(self.anchor);
+                        .anchor(self.anchor)
+                        .offset(offset);
                     if let Some(child_bounds) = element_state.child_bounds {
-                        anchored = anchored.position(
-                            child_bounds.corner(self.resolved_attach()) + self.resolved_offset(cx),
-                        );
+                        anchored =
+                            anchored.position(child_bounds.corner(self.resolved_attach()) + offset);
                     }
                     let mut element = deferred(anchored.child(div().occlude().child(menu.clone())))
                         .with_priority(1)