Add padding to new text in ui example (#12567)

# Objective

#11237 added some new text to the UI example. Unlike the other text
sharing the same container just above, this new text has no padding and
straddles the edge of the screen.

## Solution

Move the padding to the container, and add `row_gap` so nodes placed in
the container get some vertical separation as well.

Before / After
<img width="320" alt="12567-before (1)"
src="https://github.com/bevyengine/bevy/assets/200550/de0aa142-c715-4c57-b607-d1bdc5d20a01">
<img width="320" alt="12567-after"
src="https://github.com/bevyengine/bevy/assets/200550/70b5c9db-9cb2-4f92-88b0-83590ea838b0">
This commit is contained in:
Rob Parrett 2024-03-26 13:17:26 -07:00 committed by GitHub
parent 0265436fff
commit 4edd782f0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -62,6 +62,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
style: Style {
width: Val::Percent(100.),
flex_direction: FlexDirection::Column,
padding: UiRect::all(Val::Px(5.)),
row_gap: Val::Px(5.),
..default()
},
background_color: Color::srgb(0.15, 0.15, 0.15).into(),
@ -77,11 +79,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
font_size: 30.0,
..default()
},
)
.with_style(Style {
margin: UiRect::all(Val::Px(5.)),
..default()
}),
),
// Because this is a distinct label widget and
// not button/list item text, this is necessary
// for accessibility to treat the text accordingly.