From 3874d315ec6f007ffa8cec0d9251ff1df03a85b9 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 19 Mar 2025 09:43:33 -0300 Subject: [PATCH] assistant2: Adjust text and padding alignment between messages (#27067) Ensuring that text between the "you" messages align with text in the assistant response. This also creates a nice subtle hierarchy effect where the "you" message card is wider than the message, making it slightly easier to tell them apart. Release Notes: - N/A --- crates/assistant2/src/active_thread.rs | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/crates/assistant2/src/active_thread.rs b/crates/assistant2/src/active_thread.rs index 570ae756a33a250cdefe7fb1a19c054ee568c92e..08e55e3dcea1ac86880e845cc32917e5620b3a91 100644 --- a/crates/assistant2/src/active_thread.rs +++ b/crates/assistant2/src/active_thread.rs @@ -583,7 +583,7 @@ impl ActiveThread { .p_2p5() .child(edit_message_editor) } else { - div().p_2p5().text_ui(cx).child(markdown.clone()) + div().text_ui(cx).child(markdown.clone()) }, ) .when_some(context, |parent, context| { @@ -603,15 +603,16 @@ impl ActiveThread { let styled_message = match message.role { Role::User => v_flex() .id(("message-container", ix)) - .pt_2p5() - .px_2p5() + .pt_2() + .pl_2() + .pr_2p5() .child( v_flex() .bg(colors.editor_background) .rounded_lg() .border_1() .border_color(colors.border) - .shadow_sm() + .shadow_md() .child( h_flex() .py_1() @@ -702,12 +703,12 @@ impl ActiveThread { }, ), ) - .child(message_content), + .child(div().p_2().child(message_content)), ), Role::Assistant => { v_flex() .id(("message-container", ix)) - .child(message_content) + .child(div().py_3().px_4().child(message_content)) .when( !tool_uses.is_empty() || !scripting_tool_uses.is_empty(), |parent| { @@ -729,7 +730,7 @@ impl ActiveThread { v_flex() .bg(colors.editor_background) .rounded_sm() - .child(message_content), + .child(div().p_4().child(message_content)), ), }; @@ -745,7 +746,7 @@ impl ActiveThread { let lighter_border = cx.theme().colors().border.opacity(0.5); - div().px_2p5().child( + div().px_4().child( v_flex() .rounded_lg() .border_1()