fix overlay hang default

Author: harryalbert

app/src/ai/agent_management/notifications/item_rendering.rs

@@ -399,12 +399,6 @@ fn render_message_text(message: &str, expanded: bool, appearance: &Appearance) -
 
 /// Total size of the agent avatar component rendered alongside each notification.
 const NOTIFICATION_AVATAR_SIZE: f32 = 32.;
-/// Where the status / cloud overlay's BR sits relative to the brand circle's BR edge,
-/// as a signed fraction of `NOTIFICATION_AVATAR_SIZE`.
-/// Negative values push the overlay past the circle's BR (toward the bounding box's
-/// BR); this surface sits slightly past the circle's edge so the badge appears to
-/// hang off the bottom-right corner.
-const NOTIFICATION_OVERLAY_OFFSET_FROM_CIRCLE_EDGE: f32 = -0.19;
 
 fn render_agent_avatar(
     agent: NotificationSourceAgent,
@@ -426,7 +420,7 @@ fn render_agent_avatar(
     render_icon_with_status(
         variant,
         NOTIFICATION_AVATAR_SIZE,
-        NOTIFICATION_OVERLAY_OFFSET_FROM_CIRCLE_EDGE,
+        0.,
         theme,
         theme.surface_2(),
     )

app/src/terminal/view/pane_impl.rs

@@ -53,12 +53,6 @@ use warpui::{AppContext, Element, ModelHandle, SingletonEntity, TypedActionView,
 /// Sized so the component fits comfortably within `PANE_HEADER_HEIGHT` (34px) with a
 /// few pixels of vertical buffer.
 const PANE_HEADER_AGENT_SIZE: f32 = 26.;
-/// Where the status / cloud overlay's BR sits relative to the brand circle's BR edge,
-/// as a signed fraction of `PANE_HEADER_AGENT_SIZE`.
-/// Negative values push the overlay past the circle's BR (toward the bounding box's
-/// BR); this surface sits slightly past the circle's edge so the badge appears to
-/// hang off the bottom-right corner.
-const PANE_HEADER_OVERLAY_OFFSET_FROM_CIRCLE_EDGE: f32 = -0.19;
 
 impl TerminalView {
     /// Returns a reference to the focus handle if one has been set.
@@ -305,7 +299,7 @@ impl TerminalView {
             render_icon_with_status(
                 variant,
                 PANE_HEADER_AGENT_SIZE,
-                PANE_HEADER_OVERLAY_OFFSET_FROM_CIRCLE_EDGE,
+                0.,
                 theme,
                 theme.background(),
             )

app/src/ui_components/icon_with_status.rs

@@ -66,21 +66,28 @@ fn status_in_cloud_size(total: f32) -> f32 {
     total * STATUS_IN_CLOUD_RATIO
 }
 
+/// Default overhang of the overlay's BR past the circle's BR edge (toward the box's
+/// BR), as a fraction of `total_size`. Baked into `corner_overlay_offset` so most
+/// surfaces can just pass `0.0` for their `overlay_extra_overhang_ratio`.
+const DEFAULT_OVERLAY_OVERHANG_PAST_CIRCLE_EDGE: f32 = 0.19;
+
 /// Returns the pixel offset applied to the overlay's `BottomRight → BottomRight`
 /// anchor.
 /// The offset is measured from the bounding box's BR corner, so the returned value is
 /// negative whenever the overlay sits up-and-left of the box's BR (which is the only
 /// case we render).
 ///
-/// `overlay_offset_from_circle_edge_ratio` is a signed fraction of `total` that
-/// positions the overlay's BR relative to the **circle's** BR corner:
-/// * `0.0` — overlay BR sits exactly on the circle's BR edge.
-/// * Positive — overlay BR is pulled further into the circle (toward the center).
-/// * Negative — overlay BR sits past the circle's BR edge, toward the box's BR.
-///   `-(1.0 - CIRCLE_RATIO)` places it exactly on the box's BR corner, which is the
-///   Figma-natural position where the badge appears to hang off the circle's BR.
-fn corner_overlay_offset(total: f32, overlay_offset_from_circle_edge_ratio: f32) -> f32 {
-    -(1.0 - CIRCLE_RATIO) * total - overlay_offset_from_circle_edge_ratio * total
+/// `overlay_extra_overhang_ratio` is a signed fraction of `total` added to
+/// `DEFAULT_OVERLAY_OVERHANG_PAST_CIRCLE_EDGE`:
+/// * `0.0` — overlay BR sits `DEFAULT_OVERLAY_OVERHANG_PAST_CIRCLE_EDGE * total` past
+///   the circle's BR (the position most surfaces want).
+/// * Positive — overlay BR pushed further toward the box's BR. A value of
+///   `1 - CIRCLE_RATIO - DEFAULT_OVERLAY_OVERHANG_PAST_CIRCLE_EDGE` (= 0.05) lands
+///   exactly on the box's BR — the Figma-natural overhang.
+/// * Negative — overlay BR pulled inward toward the circle's center.
+fn corner_overlay_offset(total: f32, overlay_extra_overhang_ratio: f32) -> f32 {
+    let total_overhang = DEFAULT_OVERLAY_OVERHANG_PAST_CIRCLE_EDGE + overlay_extra_overhang_ratio;
+    -((1.0 - CIRCLE_RATIO) - total_overhang) * total
 }
 
 /// What to render inside the circle.
@@ -109,18 +116,17 @@ pub(crate) enum IconWithStatusVariant {
 /// sub-components (brand circle, status badge, cloud lobe) are derived proportionally,
 /// so callers only need to pick the size they want.
 ///
-/// `overlay_offset_from_circle_edge_ratio` is a signed fraction of `total_size` that
-/// positions the badge / cloud overlay's BR relative to the **circle's** BR corner:
-/// `0.0` anchors the overlay BR right on the circle's BR edge, positive values pull it
-/// further toward the circle's center, and negative values push it past the circle's
-/// BR toward the bounding box's BR (where the Figma-natural overhang lives).
+/// `overlay_extra_overhang_ratio` is a signed fraction of `total_size` added to the
+/// default overlay overhang past the circle's BR edge. Most surfaces pass `0.0` to
+/// get the default position; positive values push the overlay further toward the box's
+/// BR (more overhang) and negative values pull it inward toward the circle's center.
 ///
 /// When `is_ambient` is set on an agent variant, the status badge is replaced by a
 /// white cloud containing the status icon.
 pub(crate) fn render_icon_with_status(
     variant: IconWithStatusVariant,
     total_size: f32,
-    overlay_offset_from_circle_edge_ratio: f32,
+    overlay_extra_overhang_ratio: f32,
     theme: &WarpTheme,
     badge_ring_background: WarpThemeFill,
 ) -> Box<dyn Element> {
@@ -163,7 +169,7 @@ pub(crate) fn render_icon_with_status(
                 status.as_ref(),
                 is_ambient,
                 total_size,
-                overlay_offset_from_circle_edge_ratio,
+                overlay_extra_overhang_ratio,
                 theme,
                 badge_ring_background,
             )
@@ -190,7 +196,7 @@ pub(crate) fn render_icon_with_status(
                 status.as_ref(),
                 is_ambient,
                 total_size,
-                overlay_offset_from_circle_edge_ratio,
+                overlay_extra_overhang_ratio,
                 theme,
                 badge_ring_background,
             )
@@ -228,7 +234,7 @@ fn attach_status_overlay(
     status: Option<&ConversationStatus>,
     is_ambient: bool,
     total_size: f32,
-    overlay_offset_from_circle_edge_ratio: f32,
+    overlay_extra_overhang_ratio: f32,
     theme: &WarpTheme,
     badge_ring_background: WarpThemeFill,
 ) -> Box<dyn Element> {
@@ -237,15 +243,15 @@ fn attach_status_overlay(
             circle,
             status,
             total_size,
-            overlay_offset_from_circle_edge_ratio,
+            overlay_extra_overhang_ratio,
             theme,
         )
     } else {
         render_with_optional_status_badge(
             circle,
             status,
             total_size,
-            overlay_offset_from_circle_edge_ratio,
+            overlay_extra_overhang_ratio,
             theme,
             badge_ring_background,
         )
@@ -258,7 +264,7 @@ fn render_with_cloud_status_badge(
     circle: Box<dyn Element>,
     status: Option<&ConversationStatus>,
     total_size: f32,
-    overlay_offset_from_circle_edge_ratio: f32,
+    overlay_extra_overhang_ratio: f32,
     theme: &WarpTheme,
 ) -> Box<dyn Element> {
     let cloud_diameter = cloud_icon_size(total_size);
@@ -299,7 +305,7 @@ fn render_with_cloud_status_badge(
         None => cloud,
     };
 
-    let cloud_offset = corner_overlay_offset(total_size, overlay_offset_from_circle_edge_ratio);
+    let cloud_offset = corner_overlay_offset(total_size, overlay_extra_overhang_ratio);
     let mut stack = Stack::new().with_child(
         ConstrainedBox::new(circle)
             .with_width(total_size)
@@ -326,7 +332,7 @@ fn render_with_optional_status_badge(
     circle: Box<dyn Element>,
     status: Option<&ConversationStatus>,
     total_size: f32,
-    overlay_offset_from_circle_edge_ratio: f32,
+    overlay_extra_overhang_ratio: f32,
     theme: &WarpTheme,
     badge_ring_background: WarpThemeFill,
 ) -> Box<dyn Element> {
@@ -351,8 +357,7 @@ fn render_with_optional_status_badge(
         .with_corner_radius(CornerRadius::with_all(Radius::Percentage(50.)))
         .finish();
 
-    let badge_corner_offset =
-        corner_overlay_offset(total_size, overlay_offset_from_circle_edge_ratio);
+    let badge_corner_offset = corner_overlay_offset(total_size, overlay_extra_overhang_ratio);
     let mut stack = Stack::new().with_child(
         ConstrainedBox::new(circle)
             .with_width(total_size)

app/src/workspace/view/conversation_list/item.rs

@@ -41,12 +41,11 @@ const DIALOG_OFFSET_PIXELS: f32 = -16.;
 /// Total size of the agent icon-with-status component rendered in each conversation list
 /// row.
 const LIST_ITEM_AGENT_SIZE: f32 = 22.;
-/// Where the status overlay's BR sits relative to the brand circle's BR edge, as a
-/// signed fraction of `LIST_ITEM_AGENT_SIZE`.
-/// `-(1 - CIRCLE_RATIO) ≈ -0.24` puts the overlay's BR exactly on the bounding box's
-/// BR corner, so the badge appears to hang off the circle's bottom-right (matches the
-/// Figma natural overlap).
-const LIST_ITEM_OVERLAY_OFFSET_FROM_CIRCLE_EDGE: f32 = -0.24;
+/// Extra overhang past the default overlay position, as a fraction of
+/// `LIST_ITEM_AGENT_SIZE`. Pushes the badge all the way to the bounding box's BR
+/// corner, matching the Figma natural overlap; the conversation list reads better
+/// with the status sitting slightly further out than the other surfaces.
+const LIST_ITEM_OVERLAY_EXTRA_OVERHANG: f32 = 0.05;
 
 /// Generate a position ID for a conversation list item
 fn conversation_item_position_id(id: &ConversationOrTaskId) -> String {
@@ -216,7 +215,7 @@ pub fn render_item(props: ItemProps<'_>, app: &AppContext) -> Box<dyn Element> {
             Some(variant) => render_icon_with_status(
                 variant,
                 LIST_ITEM_AGENT_SIZE,
-                LIST_ITEM_OVERLAY_OFFSET_FROM_CIRCLE_EDGE,
+                LIST_ITEM_OVERLAY_EXTRA_OVERHANG,
                 theme,
                 theme.background(),
             ),

app/src/workspace/view/vertical_tabs.rs

@@ -111,12 +111,6 @@ pub(super) const VERTICAL_TABS_DETAIL_SIDECAR_POSITION_ID: &str = "vertical_tabs
 /// Total size of the icon-with-status component rendered for each vertical-tabs row.
 /// Sub-components (circle, badge, cloud) are derived inside `render_icon_with_status`.
 const VERTICAL_TABS_ICON_SIZE: f32 = 24.;
-/// Where the status / cloud overlay's BR sits relative to the brand circle's BR edge,
-/// as a signed fraction of `VERTICAL_TABS_ICON_SIZE`.
-/// Negative values push the overlay past the circle's BR (toward the bounding box's
-/// BR); this surface sits slightly past the circle's edge so the badge appears to
-/// hang off the bottom-right corner.
-const VERTICAL_TABS_OVERLAY_OFFSET_FROM_CIRCLE_EDGE: f32 = -0.19;
 
 fn vtab_pane_row_position_id(pane_group_id: EntityId, pane_id: PaneId) -> String {
     format!("vertical_tabs:pane_row:{pane_group_id:?}:{pane_id}")
@@ -253,7 +247,7 @@ fn render_pane_icon_with_status(
     render_icon_with_status(
         variant,
         VERTICAL_TABS_ICON_SIZE,
-        VERTICAL_TABS_OVERLAY_OFFSET_FROM_CIRCLE_EDGE,
+        0.,
         theme,
         theme.background(),
     )
@@ -3585,13 +3579,7 @@ fn render_summary_pane_kind_icon_circle(
     // mode). Non-ambient agent kinds and all other pane kinds fall through to the inline
     // circle rendering below.
     if let Some(variant) = ambient_agent_variant(&kind) {
-        return render_icon_with_status(
-            variant,
-            total_size,
-            VERTICAL_TABS_OVERLAY_OFFSET_FROM_CIRCLE_EDGE,
-            theme,
-            theme.background(),
-        );
+        return render_icon_with_status(variant, total_size, 0., theme, theme.background());
     }
     let icon_size = total_size * SUMMARY_INLINE_ICON_RATIO;
     let padding = total_size * SUMMARY_INLINE_PADDING_RATIO;