Align the assistant message headers with the editable message content

Nathan Sobo created 2 years ago

Since the message headers are buttons, we need to shift them relatively to
compensate for the fact that the background is only visible when hovered.
I'm ok with the background not being aligned so long as the unhovered text is.

Change summary

crates/assistant/src/assistant_panel.rs | 14 +++++++++-----
1 file changed, 9 insertions(+), 5 deletions(-)

Detailed changes

crates/assistant/src/assistant_panel.rs

@@ -29,7 +29,7 @@ use editor::{
 use fs::Fs;
 use futures::StreamExt;
 use gpui::{
-    canvas, div, point, relative, rems, uniform_list, Action, AnyElement, AppContext,
+    canvas, div, point, relative, rems, rgba, uniform_list, Action, AnyElement, AppContext,
     AsyncWindowContext, AvailableSpace, ClipboardItem, Context, EventEmitter, FocusHandle,
     FocusableView, FontStyle, FontWeight, HighlightStyle, InteractiveElement, IntoElement, Model,
     ModelContext, ParentElement, Pixels, PromptLevel, Render, SharedString,
@@ -2325,12 +2325,16 @@ impl ConversationEditor {
                                     }
                                 });
 
-                            h_stack()
+                            div()
+                                .h_flex()
                                 .id(("message_header", message_id.0))
                                 .h_11()
+                                .relative()
                                 .gap_1()
-                                .p_1()
-                                .child(sender)
+                                // Sender is a button with a padding of 1, but only has a background on hover,
+                                // so we shift it left by the same amount to align the text with the content
+                                // in the un-hovered state.
+                                .child(div().child(sender).relative().neg_left_1())
                                 // TODO: Only show this if the message if the message has been sent
                                 .child(
                                     Label::new(
@@ -2538,7 +2542,7 @@ impl Render for ConversationEditor {
             .child(
                 div()
                     .size_full()
-                    .pl_2()
+                    .pl_4()
                     .bg(cx.theme().colors().editor_background)
                     .child(self.editor.clone()),
             )