[UI] Issues with Transform in parent->child hierarchy.

[FssAy]

Hi, I am starting with bevy and trying to create a simple UI for showing alerts. What I had in mind was first creating a TextBundle and then a NodeBundle as a child, for the background, so the position would be inherited and I could simply change the desired size based on the text width and size.
First issue is that the child is in front of a parent, and after setting the Transform component with negative Z value, nothing happens, but the documentation says "In 2d, the z component is used for z-ordering elements: higher z-value will be in front of lower z-value." (I've used Transform::from_xyz).
Another issue is that the size of the text is not know for the child and I have no clue how can I get it in the same system.

Here is the code for spawning ui:

commands.spawn_bundle(TextBundle {
    style: Style {
        position: Rect {
            left: Val::Percent(50.0),
            right: Val::Undefined,
            top: Val::Percent(50.0),
            bottom: Val::Undefined
        },
        position_type: PositionType::Absolute,
        align_items: AlignItems::Center,
        justify_content: JustifyContent::Center,
        ..default()
    },
    text: Text::with_section(
        format!("[ERROR]: {}", event.0),
        TextStyle {
            font: (font.0).clone(),
            font_size: 12.0,
            color: Default::default()
        },
        TextAlignment {
            vertical: VerticalAlign::Center,
            horizontal: HorizontalAlign::Center,
        }
    ),
    ..default()
}).with_children(|parent| {
    parent.spawn_bundle(NodeBundle {
        style: Style {
            position_type: PositionType::Relative,
            size: Size::new(Val::Px(500.0), Val::Px(12.0)),
            ..default()
        },
        color: Color::rgba(0.25, 0.25, 0.75, 0.9).into(),
        transform: Transform::from_xyz(50.0, 50.0, -200.0),
        ..default()
    });
});

And here is the result of it:

I also had an idea to replace with_children to insert_bundle and now the z-ordering works great, but everything has been moved into bottom left corner and the text has broke into 2 lines...

Here's the code:

commands.spawn_bundle(TextBundle {
    style: Style {
        position: Rect {
            left: Val::Percent(50.0),
            right: Val::Undefined,
            top: Val::Percent(50.0),
            bottom: Val::Undefined
        },
        position_type: PositionType::Absolute,
        align_items: AlignItems::Center,
        justify_content: JustifyContent::Center,
        ..default()
    },
    text: Text::with_section(
        format!("[ERROR]: {}", event.0),
        TextStyle {
            font: (font.0).clone(),
            font_size: 12.0,
            color: Default::default()
        },
        TextAlignment {
            vertical: VerticalAlign::Center,
            horizontal: HorizontalAlign::Center,
        }
    ),
    ..default()
}).insert_bundle(NodeBundle {
    style: Style {
        position_type: PositionType::Relative,
        size: Size::new(Val::Px(500.0), Val::Px(12.0)),
        ..default()
    },
    color: Color::rgba(0.25, 0.25, 0.75, 0.9).into(),
    transform: Transform::from_xyz(50.0, 50.0, -200.0),
    ..default()
});

So is it some kind of a bug, or am I doing something wrong? I've read much of the documentation and worked with some examples, but have no clue what's going on here. I guess that the solution would be to create the "box" first and then try to fit the text inside of it.