debugger: Make the remove button easier to click for breakpoint list entries (#32772)

Cole Miller created 7 months ago

Closes #31574 

Move this button a bit to the left so it doesn't get blocked by the
hitbox of the scrollbar.

Also makes the list entries a bit thicker vertically so that the button
can be `XSmall` instead of `Indicator`-sized again.

Release Notes:

- Debugger Beta: fixed a layout issue that made it hard to click the
remove (`X`) button for entries in the breakpoint list.

Change summary

crates/debugger_ui/src/session/running/breakpoint_list.rs | 66 ++++----
1 file changed, 35 insertions(+), 31 deletions(-)

Detailed changes

crates/debugger_ui/src/session/running/breakpoint_list.rs

@@ -506,44 +506,48 @@ impl LineBreakpoint {
             cx.stop_propagation();
         })
         .end_hover_slot(
-            IconButton::new(
-                SharedString::from(format!(
-                    "breakpoint-ui-on-click-go-to-line-remove-{:?}/{}:{}",
-                    self.dir, self.name, self.line
-                )),
-                IconName::Close,
-            )
-            .on_click({
-                let weak = weak.clone();
-                let path = path.clone();
-                move |_, _, cx| {
-                    weak.update(cx, |breakpoint_list, cx| {
-                        breakpoint_list.edit_line_breakpoint(
-                            path.clone(),
-                            row,
-                            BreakpointEditAction::Toggle,
+            h_flex()
+                .child(
+                    IconButton::new(
+                        SharedString::from(format!(
+                            "breakpoint-ui-on-click-go-to-line-remove-{:?}/{}:{}",
+                            self.dir, self.name, self.line
+                        )),
+                        IconName::Close,
+                    )
+                    .on_click({
+                        let weak = weak.clone();
+                        let path = path.clone();
+                        move |_, _, cx| {
+                            weak.update(cx, |breakpoint_list, cx| {
+                                breakpoint_list.edit_line_breakpoint(
+                                    path.clone(),
+                                    row,
+                                    BreakpointEditAction::Toggle,
+                                    cx,
+                                );
+                            })
+                            .ok();
+                        }
+                    })
+                    .tooltip(move |window, cx| {
+                        Tooltip::for_action_in(
+                            "Unset Breakpoint",
+                            &UnsetBreakpoint,
+                            &focus_handle,
+                            window,
                             cx,
-                        );
+                        )
                     })
-                    .ok();
-                }
-            })
-            .tooltip(move |window, cx| {
-                Tooltip::for_action_in(
-                    "Unset Breakpoint",
-                    &UnsetBreakpoint,
-                    &focus_handle,
-                    window,
-                    cx,
+                    .icon_size(ui::IconSize::XSmall),
                 )
-            })
-            .icon_size(ui::IconSize::Indicator),
+                .right_4(),
         )
         .child(
             v_flex()
                 .py_1()
                 .gap_1()
-                .min_h(px(22.))
+                .min_h(px(26.))
                 .justify_center()
                 .id(SharedString::from(format!(
                     "breakpoint-ui-on-click-go-to-line-{:?}/{}:{}",
@@ -650,7 +654,7 @@ impl ExceptionBreakpoint {
             v_flex()
                 .py_1()
                 .gap_1()
-                .min_h(px(22.))
+                .min_h(px(26.))
                 .justify_center()
                 .id(("exception-breakpoint-label", ix))
                 .child(