Text wrapping with Val::Percent

[alice-i-cecile]

Discussed in #4008

^{Originally posted by vringar February 21, 2022}
Hey,

I'm trying to build a UI that doesn't use Val::px anywhere to ensure that the UI will scale seamlessly for smaller displays, however I'm running into an issue, when trying to get text wrapping to work.

This is the almost minimal code example I could come up with to show the issue:

use bevy::prelude::*;

fn main() {
    App::new()
        .insert_resource(ClearColor(Color::rgb(0.4, 0.4, 0.4)))
        .insert_resource(WindowDescriptor {
            title: "TextDemo".to_string(),
            vsync: true,
            ..Default::default()
        })
        .insert_resource(Msaa { samples: 4 })
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>){
    commands.spawn_bundle(UiCameraBundle::default());

    commands
        .spawn_bundle(NodeBundle {
            // Root Panel, covers the entire screen
            style: Style {
                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                justify_content: JustifyContent::SpaceBetween,
                ..Default::default()
            },
            color: Color::NONE.into(),
            ..Default::default()
        })
        .with_children(|parent| {
            spawn_left_panel(parent, &asset_server);
        });

}

fn spawn_left_panel(parent: &mut ChildBuilder, asset_server: &Res<AssetServer>) {
    parent
        .spawn_bundle(NodeBundle {
            style: Style {
                flex_direction: FlexDirection::ColumnReverse,
                size: Size::new(Val::Percent(20.0), Val::Percent(100.0)),
                ..Default::default()
            },
            color: Color::rgb(0.10, 0.10, 0.10).into(),
            ..Default::default()
        })
        .with_children(|parent| {
            parent
                .spawn_bundle(TextBundle {
                    text: Text::with_section(
                        "This is a super long text, that I would hope would get wrapped. Unfortunately it just breaks out of the box and keeps going",
                        TextStyle {
                            font: asset_server.load("FiraSans-Bold.ttf"),
                            font_size: 20.0,
                            color: Color::rgb(1.0, 1.0, 1.0),
                        },
                        Default::default(),
                    ),
                    style: Style {
                        position: Rect {
                            top: Val::Percent(1.0),
                            left: Val::Percent(2.0),
                            ..Default::default()
                        },
                        max_size: Size::new(Val::Percent(100.0), Val::Undefined),
                        ..Default::default()
                    },
                    ..Default::default()
                });
        });
}

This results in the following display:

I would have assumed that max_size: Size::new(Val::Percent(100.0), Val::Undefined) would mean that the box can't get bigger than its parent. But that is not how it works. Is the error in my mental model, my code or bevy?

[alice-i-cecile]

Closing as a duplicate of #1490.