Add clip rect in panels and use them for large collapsing headers

crates/re_ui/examples/re_ui_example.rs

@@ -167,6 +167,9 @@ impl eframe::App for ExampleApp {
                 ..Default::default()
             })
             .show_animated(egui_ctx, self.left_panel, |ui| {
+                // no need to extend `ui.max_rect()` as the enclosing frame doesn't have margins
+                ui.set_clip_rect(ui.max_rect());
+
                 egui::TopBottomPanel::top("left_panel_tio_bar")
                     .exact_height(re_ui::ReUi::title_bar_height())
                     .frame(egui::Frame {
@@ -225,8 +228,20 @@ impl eframe::App for ExampleApp {
         egui::SidePanel::right("right_panel")
             .frame(panel_frame)
             .show_animated(egui_ctx, self.right_panel, |ui| {
+                // TODO(ab): use the proper `egui::Rect` function when egui 0.23 is released
+                let clip_rect = egui::Rect::from_min_max(
+                    ui.max_rect().min - panel_frame.inner_margin.left_top(),
+                    ui.max_rect().max + panel_frame.inner_margin.right_bottom(),
+                );
+                ui.set_clip_rect(clip_rect);
+
                 ui.strong("Right panel");
                 selection_buttons(ui);
+                self.re_ui
+                    .large_collapsing_header(ui, "Large Collapsing Header", true, |ui| {
+                        ui.label("Some data here");
+                        ui.label("Some data there");
+                    });
             });
 
         egui::CentralPanel::default()

crates/re_ui/src/lib.rs

@@ -444,6 +444,9 @@ impl ReUi {
         response
     }
 
+    /// Show a prominent collapsing header to be used as section delimitation in side panels.
+    ///
+    /// Note that a clip rect must be set (typically by the panel) to avoid any overdraw.
     #[allow(clippy::unused_self)]
     pub fn large_collapsing_header<R>(
         &self,
@@ -507,7 +510,10 @@ impl ReUi {
                     .galley_with_color(text_pos, galley, visuals.text_color());
 
                 // Let the rect cover the full panel width:
-                let bg_rect = rect.expand2(egui::vec2(1000.0, 0.0));
+                let mut bg_rect = rect;
+                bg_rect.extend_with_x(ui.clip_rect().right());
+                bg_rect.extend_with_x(ui.clip_rect().left());
+
                 ui.painter().set(
                     background_frame,
                     Shape::rect_filled(bg_rect, 0.0, visuals.bg_fill),

crates/re_viewer/src/ui/blueprint_panel.rs

@@ -21,6 +21,11 @@ pub fn blueprint_panel_ui(
         .default_width((0.35 * screen_width).min(200.0).round());
 
     panel.show_animated_inside(ui, expanded, |ui: &mut egui::Ui| {
+        // Set the clip rectangle to the panel for the benefit of nested, "full span" widgets like
+        // large collapsing headers. Here, no need to extend `ui.max_rect()` as the enclosing frame
+        // doesn't have inner margins.
+        ui.set_clip_rect(ui.max_rect());
+
         title_bar_ui(blueprint, ctx, ui, spaces_info);
 
         egui::Frame {

crates/re_viewer/src/ui/selection_panel.rs

@@ -40,6 +40,11 @@ impl SelectionPanel {
             });
 
         panel.show_animated_inside(ui, expanded, |ui: &mut egui::Ui| {
+            // Set the clip rectangle to the panel for the benefit of nested, "full span" widgets
+            // like large collapsing headers. Here, no need to extend `ui.max_rect()` as the
+            // enclosing frame doesn't have inner margins.
+            ui.set_clip_rect(ui.max_rect());
+
             egui::TopBottomPanel::top("selection_panel_title_bar")
                 .exact_height(re_ui::ReUi::title_bar_height())
                 .frame(egui::Frame {