From 9af4046ac32fbf20e6c22ce4907f74b98da8eb0d Mon Sep 17 00:00:00 2001 From: funman300 Date: Tue, 12 May 2026 15:55:49 -0700 Subject: [PATCH] fix(engine): modal action buttons wrap to next row on narrow screens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On high-DPI Android (Pixel 7: 420 DPI → ~411 dp logical width), the modal card fits at ~363 dp wide. The stats modal's three-button row ("Watch replay" + "Copy share link" + "Done") totals ~455 dp, causing text to wrap inside each button (2–3 lines per button label). Added flex_wrap: FlexWrap::Wrap + row_gap: VAL_SPACE_2 to spawn_modal_actions so buttons that don't fit flow onto a second line as whole units instead of wrapping text inside them. Affects all modals uniformly; desktop (wide modal) is unaffected since buttons fit in one line with room to spare. Co-Authored-By: Claude Sonnet 4.6 --- solitaire_engine/src/ui_modal.rs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/solitaire_engine/src/ui_modal.rs b/solitaire_engine/src/ui_modal.rs index 136ba99..c86e310 100644 --- a/solitaire_engine/src/ui_modal.rs +++ b/solitaire_engine/src/ui_modal.rs @@ -296,6 +296,10 @@ pub fn spawn_modal_body_text( /// Spawns the bottom actions row — flex-row with primary right-aligned. /// The closure populates the row's buttons via `spawn_modal_button`. +/// +/// `flex_wrap: Wrap` lets the row reflow onto a second line when buttons +/// collectively exceed the modal width on narrow screens (e.g. high-DPI +/// Android where the logical viewport is ~411 dp). pub fn spawn_modal_actions(parent: &mut ChildSpawnerCommands, build_buttons: F) where F: FnOnce(&mut ChildSpawnerCommands), @@ -305,7 +309,9 @@ where ModalActions, Node { flex_direction: FlexDirection::Row, + flex_wrap: FlexWrap::Wrap, column_gap: VAL_SPACE_3, + row_gap: VAL_SPACE_2, justify_content: JustifyContent::FlexEnd, margin: UiRect::top(VAL_SPACE_2), ..default()