diff --git a/crates/ui-egui/src/panels/edit.rs b/crates/ui-egui/src/panels/edit.rs index d67f35cc4..23c68a933 100644 --- a/crates/ui-egui/src/panels/edit.rs +++ b/crates/ui-egui/src/panels/edit.rs @@ -701,9 +701,13 @@ fn histogram(app: &mut LightcraftApp, ui: &mut egui::Ui, id: PhotoId) { } } let mut clicked = resp.clicked(); + // the panel's floating scroll bar widens over the right edge when hovered: both buttons keep + // clear of it, the left one too so they stay symmetric (#1640) + let scroll = ui.spacing().scroll; + let inset = 20.0 + scroll.bar_width + scroll.bar_outer_margin; for (name, x, label, clipped) in [ - ("shadows", plot.left() + 20.0, "Shadow clipping", clipping.map(|(lo, _)| lo > 0.003)), - ("highlights", plot.right() - 20.0, "Highlight clipping", clipping.map(|(_, hi)| hi > 0.003)), + ("shadows", plot.left() + inset, "Shadow clipping", clipping.map(|(lo, _)| lo > 0.003)), + ("highlights", plot.right() - inset, "Highlight clipping", clipping.map(|(_, hi)| hi > 0.003)), ] { let rect = Rect::from_center_size(pos2(x, plot.top() + 14.0), vec2(24.0, 22.0)); let response = ui.interact(rect, ui.id().with(("histogram-clipping", name)), Sense::click()); diff --git a/crates/ui-egui/src/tests_panels.rs b/crates/ui-egui/src/tests_panels.rs index 5b979ccdc..8e360f862 100644 --- a/crates/ui-egui/src/tests_panels.rs +++ b/crates/ui-egui/src/tests_panels.rs @@ -2392,3 +2392,20 @@ fn histogram_corners_toggle_clipping_warnings() { h.step(); assert!(!h.app.ui.show_clipping); } + +#[test] +fn the_histogram_clipping_buttons_stay_clear_of_the_hovered_scroll_bar() { + // every section open: the Edit panel scrolls, so its scroll bar runs past the histogram + let h = demo( + [1400.0, 700.0], + json!({"view": "detail", "right": "edit", "histogram": true, "openSections": ["light", "color", "effects", "detail", "optics"]}), + ); + let hist = widget(&h, "histogram"); + let (low, high) = (widget(&h, "histogram:shadows"), widget(&h, "histogram:highlights")); + // a hovered floating scroll bar grows to its full width at the panel's right edge, over the content + let scroll = h.view.ctx.global_style().spacing.scroll; + let bar_left = hist.right() - scroll.bar_outer_margin - scroll.bar_width; + assert!(high.right() <= bar_left, "the highlight clipping button {high:?} is under the scroll bar (from x = {bar_left})"); + // and the shadow one keeps the same inset from its edge + assert!(((low.left() - hist.left()) - (hist.right() - high.right())).abs() < 0.5, "{low:?} {high:?} in {hist:?}"); +}