thread view: Prevent user message controls to be cut-off (#36865)

Danilo Leal created 2 months ago

In the thread view, when focusing on the user message, we display the
editing control container absolutely-positioned in the top right.
However, if there are no rules items and no restore checkpoint button
_and_ it is the very first message, the editing controls container would
be cut-off. This PR fixes that by giving it a bit more top padding.

Release Notes:

- N/A

Change summary

crates/agent_ui/src/acp/thread_view.rs | 17 +++++++++++++----
1 file changed, 13 insertions(+), 4 deletions(-)

Detailed changes

crates/agent_ui/src/acp/thread_view.rs

@@ -1305,14 +1305,23 @@ impl AcpThreadView {
                     None
                 };
 
+                let has_checkpoint_button = message
+                    .checkpoint
+                    .as_ref()
+                    .is_some_and(|checkpoint| checkpoint.show);
+
                 let agent_name = self.agent.name();
 
                 v_flex()
                     .id(("user_message", entry_ix))
-                    .map(|this| if rules_item.is_some() {
-                        this.pt_3()
-                    } else {
-                        this.pt_2()
+                    .map(|this| {
+                        if entry_ix == 0 && !has_checkpoint_button && rules_item.is_none()  {
+                            this.pt_4()
+                        } else if rules_item.is_some() {
+                            this.pt_3()
+                        } else {
+                            this.pt_2()
+                        }
                     })
                     .pb_4()
                     .px_2()