how to play is mostly good

src/menu.rs

@@ -185,6 +185,7 @@ fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>) {
                 .observe(button_set_state(ViewState::Menu));
 
             parent.spawn((Node {
+                    width: Val::Px(500.0),
                     align_items: AlignItems::Center,
                     justify_content: JustifyContent::Center,
                     flex_direction: FlexDirection::Column,
@@ -255,16 +256,17 @@ fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>) {
                     );
                 [
                     ("Find groups of 3 cards", None),
-                    ("All cards in a set must match or differ in their traits: Color, Number, Shading, and Shape.", None),
+                    ("All cards in a set must either match or differ in their traits: Color, Number, Shading, and Shape.", None),
                     ("For example all agree on Color, Shading, and Shape but not Number...", Some(most_matching)),
-                    ("...or all agree on Number but not Color, Number, Shading, and Shape...", Some(most_not_matching)),
+                    ("...or all agree on Number but not Color, Shading, and Shape...", Some(most_not_matching)),
-                    ("...but never partial agreement on a trait...", Some(not_valid)),
+                    ("...but never partial agreement...", Some(not_valid)),
                     ("When in doubt, click the 'Help!' button to get an assist.", None),
                 ]
                 .iter()
                 .for_each(|(t, example)| {
                     parent.spawn((
                         Node {
+                            max_width: Val::Percent(100.0),
                             flex_direction: FlexDirection::Row,
                             align_items: AlignItems::Center,
                             ..default()
@@ -278,22 +280,26 @@ fn setup_how_to_play(mut commands: Commands, deck: Res<Deck>) {
                             },
                             Text(t.to_string()),
                         ));
-                        if let Some((a, b, c)) = example {
+                        parent.spawn(Node {
-                            [a, b, c].iter().for_each(|x| {
+                            ..default()
-                            let sprite = deck.cards.get(*x).unwrap();
+                        }).with_children(|parent| {
-                                parent.spawn((
+                            if let Some((a, b, c)) = example {
-                                    Node {
+                                [a, b, c].iter().for_each(|x| {
-                                        height: Val::Px(100.0),
+                                let sprite = deck.cards.get(*x).unwrap();
-                                        ..default()
+                                    parent.spawn((
-                                    },
+                                        Node {
-                                    ImageNode {
+                                            height: Val::Px(100.0),
-                                        image: sprite.image.clone(),
+                                            ..default()
-                                        texture_atlas: sprite.texture_atlas.clone(),
+                                        },
-                                        ..default()
+                                        ImageNode {
-                                    }
+                                            image: sprite.image.clone(),
-                                ));
+                                            texture_atlas: sprite.texture_atlas.clone(),
-                            });
+                                            ..default()
-                        };
+                                        }
+                                    ));
+                                });
+                            };
+                        });
                     });
                 });
             });