Work around ComboBox's vertical misalignment on horizontal layouts

[justincredible]

• Closes ComboBox, DragValue, and Button not aligned properly in a horizontal layout #7412
• I have followed the instructions in the PR template

Summary

The interact sized button is correctly aligned, but when the contents are added it grows downward from top, where the cross alignment could dictate upward from bottom or outward from middle growth. As noted in the issue, the alignment works with defaults styles because they satisfy the interact height and font size relationship, and the alignment can also be broken by reducing Spacing::interact_size::y without modifying the FontId::size of TextStyle::Button.

These changes simulate the three growth directions by mucking with the cursor.

Unaddressed Behaviour

"Currently" assumes the existing behaviour when the interact height and font size relationship is not satisfied, that is, Spacing::interact_size::y < 1.2 * FontId::size.

Vertical and Grid Layouts

Vertical layouts don't exhibit this issue, but can be included. I'm unfamiliar with grid layouts but this is mostly an issue with using multiple combo-boxes in a line.

Text Alignment

Currently, the ComboBox's label and selected text are centered regardless of cross alignment; this is always the case. Moving the inner horizontal Ui into combo_box_dyn fixes the label only and completely breaks wrapped widgets. I haven't considered it much.

Nested Horizontals

Currently, a horizontal() contained within a larger horizontal layout will misalign the outer layout in the same way a single horizontal() misaligns its widgets. Ironically, this behaviour improves the "horizontal_bottom()" layout. These changes fix the solitary bottom layout, but nesting a horizontal, while still aligned, is not correctly adjusted.

Center Wrapped

Currently, I cannot reproduce this. So this is an introduced misbehaviour, but is still corrected when the relationship is satisfied.

Other Styles

The alignment could break again with some other combination of styles and layouts, but the style configurations that are explicitly referenced by the ComboBox have been accounted for and re-establishing the interact height and font size relationship is likely to correct those situations.

Alternatives

Other attempts solely within the combo_box.rs file were unfruitful, except for incorporating the user-level workaround:

Integrated User-level Workaround

diff --git a/crates/egui/src/containers/combo_box.rs b/crates/egui/src/containers/combo_box.rs
index a5d925827..c6ea7b62b 100644
--- a/crates/egui/src/containers/combo_box.rs
+++ b/crates/egui/src/containers/combo_box.rs
@@ -231,7 +231,13 @@ impl ComboBox {
 
         let button_id = ui.make_persistent_id(id_salt);
 
-        ui.horizontal(|ui| {
+        // The combo box becomes misaligned for most layouts whenever
+        // interact height is less than 120% of the font size.
+        let interact_height = ui.spacing().interact_size.y;
+        let workaround = interact_height.max(1.2 * TextStyle::Button.resolve(ui.style()).size);
+        ui.style_mut().spacing.interact_size.y = workaround;
+
+        let inner_response = ui.horizontal(|ui| {
             let mut ir = combo_box_dyn(
                 ui,
                 button_id,
@@ -256,7 +262,12 @@ impl ComboBox {
             }
             ir
         })
-        .inner
+        .inner;
+
+        // Restore the modified style
+        ui.style_mut().spacing.interact_size.y = interact_height;
+
+        inner_response
     }
 
     /// Show a list of items with the given selected index.

However, this does not address any of the misbehaviours above, and whenever it has an effect on the layout the combo box's button is oversized compared to other button widgets.

The oversized button is correctly cross-aligned (it goes below the other buttons for Align::Min an equally above and below for Align::Center). The button is no longer oversized when the user re-establishes the interact-font relationship.

Extended MRE

This is a modified version of @J2ane's MRE which allows more convenient testing of the known configuration options. This was used for the above screnshots.

main.rs.tar.gz

[github-actions]

Preview available at https://egui-pr-preview.github.io/pr/8375-combo-box-align
Note that it might take a couple seconds for the update to show up after the preview_build workflow has completed.

View snapshot changes at kitdiff