ui: Improve UI details (Modal, Checkbox, Radio and MenuItem) (#233)

- modal: Reduce modal title line height.
- checkbox, radio: Fix label line height to align with checkbox.
- menu: Update Menu item style, height to 28px, and fix divider padding.

<img width="523" alt="image"
src="https://github.com/user-attachments/assets/c254dc07-9d37-4885-b687-58ec4d8e95a4">

<img width="453" alt="image"
src="https://github.com/user-attachments/assets/3ad44419-1953-4048-8173-4d8c0646777a">

<img width="369" alt="image"
src="https://github.com/user-attachments/assets/84d23eb2-15f9-47d7-b6d4-15295ab3a544">

crates/ui/src/checkbox.rs

@@ -1,5 +1,5 @@
 use gpui::{
-    div, prelude::FluentBuilder as _, relative, svg, ElementId, InteractiveElement, IntoElement,
+    div, prelude::FluentBuilder as _, rems, svg, ElementId, InteractiveElement, IntoElement,
     ParentElement, RenderOnce, SharedString, StatefulInteractiveElement as _, Styled as _,
     WindowContext,
 };
@@ -117,7 +117,7 @@ impl RenderOnce for Checkbox {
                         div()
                             .w_full()
                             .overflow_hidden()
-                            .line_height(relative(1.))
+                            .line_height(rems(1.2))
                             .child(label),
                     )
                 } else {
@@ -125,7 +125,8 @@ impl RenderOnce for Checkbox {
                 }
             })
             .when(self.disabled, |this| {
-                this.cursor_not_allowed().text_color(cx.theme().muted_foreground)
+                this.cursor_not_allowed()
+                    .text_color(cx.theme().muted_foreground)
             })
             .when_some(
                 self.on_click.filter(|_| !self.disabled),

crates/ui/src/modal.rs

@@ -1,9 +1,10 @@
 use std::{rc::Rc, time::Duration};
 
 use gpui::{
-    actions, anchored, div, hsla, prelude::FluentBuilder, px, Animation, AnimationExt as _,
+    actions, anchored, div, hsla, prelude::FluentBuilder, px, relative, Animation,
-    AnyElement, AppContext, Bounds, ClickEvent, Div, Hsla, InteractiveElement, IntoElement,
+    AnimationExt as _, AnyElement, AppContext, Bounds, ClickEvent, Div, Hsla, InteractiveElement,
-    KeyBinding, MouseButton, ParentElement, Pixels, Point, RenderOnce, Styled, WindowContext,
+    IntoElement, KeyBinding, MouseButton, ParentElement, Pixels, Point, RenderOnce, Styled,
+    WindowContext,
 };
 
 use crate::{
@@ -193,7 +194,9 @@ impl RenderOnce for Modal {
                         .top(y)
                         .w(self.width)
                         .when_some(self.max_width, |this, w| this.max_w(w))
-                        .children(self.title)
+                        .when_some(self.title, |this, title| {
+                            this.child(div().line_height(relative(1.)).child(title))
+                        })
                         .when(self.show_close, |this| {
                             this.child(
                                 Button::new("close", cx)

crates/ui/src/popup_menu.rs

@@ -442,27 +442,24 @@ impl Render for PopupMenu {
                 let group_id = format!("item:{}", ix);
                 let this = ListItem::new(("menu-item", ix))
                     .group(group_id.clone())
-                    .p_0()
                     .relative()
-                    .py_1p5()
-                    .px_2()
-                    .rounded_md()
                     .text_sm()
-                    .line_height(rems(1.25))
+                    .py_0()
+                    .px_2()
+                    .h(px(28.))
+                    .rounded_md()
                     .items_center()
                     .on_mouse_enter(cx.listener(move |this, _, cx| {
                         this.hovered_menu_ix = Some(ix);
                         cx.notify();
                     }));
                 match item {
-                    PopupMenuItem::Separator => this.disabled(true).child(
+                    PopupMenuItem::Separator => this.h_auto().p_0().disabled(true).child(
                         div()
-                            .p_0()
                             .rounded_none()
                             .h(px(1.))
                             .mx_neg_1()
-                            .my_px()
+                            .my_0p5()
-                            .border_0()
                             .bg(cx.theme().muted),
                     ),
                     PopupMenuItem::Item {

crates/ui/src/radio.rs

@@ -1,5 +1,5 @@
 use gpui::{
-    div, prelude::FluentBuilder, relative, svg, CursorStyle, ElementId, InteractiveElement,
+    div, prelude::FluentBuilder, rems, svg, CursorStyle, ElementId, InteractiveElement,
     IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled,
     WindowContext,
 };
@@ -91,7 +91,7 @@ impl RenderOnce for Radio {
                     div()
                         .size_full()
                         .overflow_hidden()
-                        .line_height(relative(1.))
+                        .line_height(rems(1.2))
                         .child(label),
                 )
             })