sidebar: Clip floating surface materials

Cargo.toml

@@ -28,8 +28,8 @@ gpui-component-macros = { path = "crates/macros", version = "0.5.1" }
 gpui-component-assets = { path = "crates/assets", version = "0.5.1" }
 story = { path = "crates/story" }
 
-gpui = { git = "https://github.com/BumpyClock/gpui", rev = "24cfa81ca2a9f954b96320e14b393dd519078618", features = ["font-kit"] }
-gpui_platform = { git = "https://github.com/BumpyClock/gpui", rev = "24cfa81ca2a9f954b96320e14b393dd519078618", features = ["font-kit"] }
+gpui = { git = "https://github.com/BumpyClock/gpui", rev = "4332ea7deae4838c12bad6ea64292ca22a33cf98", features = ["font-kit"] }
+gpui_platform = { git = "https://github.com/BumpyClock/gpui", rev = "4332ea7deae4838c12bad6ea64292ca22a33cf98", features = ["font-kit"] }
 gpui-macros = "0.2.2"
 sum-tree = { version = "0.2.0", package = "zed-sum-tree" }
 # reqwest = { version = "0.12.15-zed", package = "zed-reqwest" }

crates/story/src/stories/floating_sidebar_story.rs

@@ -4,7 +4,8 @@ use gpui::{
 };
 
 use gpui_component::{
-    ActiveTheme, FloatingSidebar, Icon, IconName, Side, h_flex,
+    ActiveTheme, ElevationToken, FloatingSidebar, Icon, IconName, Side, h_flex,
+    radio::RadioGroup,
     sidebar::{SidebarFooter, SidebarGroup, SidebarHeader, SidebarMenu, SidebarMenuItem},
     switch::Switch,
     v_flex,
@@ -17,6 +18,7 @@ pub struct FloatingSidebarStory {
     collapsed: bool,
     side: Side,
     wide_inset: bool,
+    elevation: ElevationToken,
 }
 
 impl FloatingSidebarStory {
@@ -26,13 +28,22 @@ impl FloatingSidebarStory {
             collapsed: false,
             side: Side::Left,
             wide_inset: false,
+            elevation: ElevationToken::Sm,
         }
     }
 
     pub fn view(window: &mut Window, cx: &mut App) -> Entity<Self> {
         cx.new(|cx| Self::new(window, cx))
     }
 
+    fn elevation_index(&self) -> usize {
+        match self.elevation {
+            ElevationToken::None => 0,
+            ElevationToken::Lg => 2,
+            _ => 1,
+        }
+    }
+
     fn render_example(
         &self,
         id: &'static str,
@@ -46,13 +57,14 @@ impl FloatingSidebarStory {
             collapsed_width
         } else {
             sidebar_width
-        } + inset;
+        } + inset * 2.0;
 
         let sidebar = FloatingSidebar::new(id)
             .side(self.side)
             .collapsed(self.collapsed)
             .width(sidebar_width)
             .inset(inset)
+            .elevation(self.elevation)
             .header_with(|collapsed, _, _cx| {
                 SidebarHeader::new()
                     .child(Icon::new(IconName::PanelLeft).size_4())
@@ -166,6 +178,20 @@ impl Render for FloatingSidebarStory {
                                         this.wide_inset = *checked;
                                         cx.notify();
                                     })),
+                            )
+                            .child(
+                                RadioGroup::horizontal("floating-sidebar-elevation")
+                                    .children(["None", "Small", "Large"])
+                                    .selected_index(Some(self.elevation_index()))
+                                    .on_click(cx.listener(|this, selected_ix: &usize, _, cx| {
+                                        this.elevation = match selected_ix {
+                                            0 => ElevationToken::None,
+                                            1 => ElevationToken::Sm,
+                                            2 => ElevationToken::Lg,
+                                            _ => return,
+                                        };
+                                        cx.notify();
+                                    })),
                             ),
                     )
                     .child(self.render_example("floating-sidebar-example", inset, window, cx)),

crates/ui/src/floating_sidebar/mod.rs

@@ -39,6 +39,9 @@ impl FloatingSidebarState {
 }
 
 /// A floating sidebar that composes SidebarShell and Sidebar with internal resize handling.
+///
+/// The default elevation is [`ElevationToken::Sm`]. Large elevations may require
+/// a larger inset near window edges to avoid native-window clipping.
 #[derive(IntoElement)]
 pub struct FloatingSidebar<E: SidebarItem + 'static> {
     id: ElementId,
@@ -76,7 +79,7 @@ impl<E: SidebarItem> FloatingSidebar<E> {
             inset: Some(DEFAULT_INSET),
             top_inset: px(0.0),
             blur_enabled: None,
-            elevation: ElevationToken::Lg,
+            elevation: ElevationToken::Sm,
             on_resize_end: None,
         }
     }
@@ -161,7 +164,10 @@ impl<E: SidebarItem> FloatingSidebar<E> {
         self
     }
 
-    /// Set the shadow elevation level for the sidebar panel.
+    /// Set the shadow elevation level for the complete sidebar panel.
+    ///
+    /// Default is [`ElevationToken::Sm`]. Large elevations may require a larger
+    /// inset near window edges to avoid native-window clipping.
     pub fn elevation(mut self, elevation: ElevationToken) -> Self {
         self.elevation = elevation;
         self
@@ -351,6 +357,7 @@ impl<E: SidebarItem> RenderOnce for FloatingSidebar<E> {
                     .collapsed(collapsed)
                     .width(expanded_width)
                     .animate_width(false)
+                    .bg(gpui::transparent_black())
                     .refine_style(&style),
             )
             .child(resize_tracker)
@@ -479,6 +486,12 @@ mod tests {
 
     #[gpui::test]
     fn test_floating_sidebar_builder(_cx: &mut gpui::TestAppContext) {
+        let default_sidebar = FloatingSidebar::<SidebarMenu>::new("default-floating-sidebar");
+        assert_eq!(default_sidebar.elevation, ElevationToken::Sm);
+        assert_eq!(default_sidebar.width, DEFAULT_WIDTH);
+        assert_eq!(default_sidebar.inset, Some(DEFAULT_INSET));
+        assert_eq!(default_sidebar.resizer_width, DEFAULT_RESIZER_WIDTH);
+
         let sidebar = FloatingSidebar::<SidebarMenu>::new("floating-sidebar")
             .side(Side::Right)
             .collapsed(true)
@@ -503,8 +516,16 @@ mod tests {
         assert_eq!(sidebar.inset, Some(px(6.0)));
         assert_eq!(sidebar.top_inset, px(12.0));
         assert_eq!(sidebar.blur_enabled, Some(false));
-        assert!(matches!(sidebar.elevation, ElevationToken::Md));
+        assert_eq!(sidebar.elevation, ElevationToken::Md);
         assert!(sidebar.on_resize_end.is_some());
+
+        let no_shadow =
+            FloatingSidebar::<SidebarMenu>::new("no-shadow").elevation(ElevationToken::None);
+        assert_eq!(no_shadow.elevation, ElevationToken::None);
+
+        let large_shadow =
+            FloatingSidebar::<SidebarMenu>::new("large-shadow").elevation(ElevationToken::Lg);
+        assert_eq!(large_shadow.elevation, ElevationToken::Lg);
     }
 
     #[gpui::test]

crates/ui/src/scroll/scrollable_mask.rs

@@ -108,7 +108,11 @@ impl Element for ScrollableMask {
         let line_height = window.line_height();
         let bounds = hitbox.bounds;
 
-        window.with_content_mask(Some(ContentMask { bounds }), |window| {
+        let content_mask = ContentMask {
+            bounds,
+            ..Default::default()
+        };
+        window.with_content_mask(Some(content_mask), |window| {
             if let Some(color) = self.debug {
                 window.paint_quad(PaintQuad {
                     bounds,