#14143 - fix bevy_ui padding (#14777)

# Objective

fixes #14143

## Solution

- removed the temporary blocker if statement when setting padding in
`Style`
- adjusted the `layout_location` and `layout_size` so they use
`layout.padding` which we already get from Taffy

## Testing

- this is the test code I used:
```rust
use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(
    mut commands: Commands,
    asset_server: Res<AssetServer>,
){
    let font = asset_server.load("fonts/FiraSans-Bold.ttf");
    commands.spawn(Camera2dBundle::default());

    commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Px(200.),
                height: Val::Px(100.),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                align_self: AlignSelf::Center,
                justify_self: JustifySelf::Center,
                ..Default::default()
            },
            background_color: BackgroundColor(Color::srgb(0.,1., 1.)),
            ..Default::default()
        })
        .with_children(|builder| {
            builder.spawn((TextBundle::from_section(
                    "Hello World",
                    TextStyle {
                        font,
                        font_size: 32.0,
                        color: Color::WHITE,
                        },
                ).with_style(Style {
                    padding: UiRect::all(Val::Px(10.)),
                    width: Val::Px(100.),
                    height: Val::Px(100.),
                    ..Default::default()
                }).with_background_color(Color::srgb(1.,0., 0.)),
            ));
            // spawn an image bundle
            builder.spawn(ImageBundle {
                style: Style {
                    padding: UiRect::all(Val::Px(10.)),
                    width: Val::Px(100.),
                    height: Val::Px(100.),
                    ..Default::default()
                },
                image: asset_server.load("square.png").into(),
                ..Default::default()
            });
        });
}
```

- I tested 5 cases: 10px padding from all sides, and 10px padding from
left, right, bottom, and top separately

- **For reviewers**: please check more cases or try to run it on some
more complicated real-world UI

## Showcase

<img width="374" alt="Screenshot 2024-08-16 at 09 28 04"
src="https://github.com/user-attachments/assets/59b85b00-e255-4669-be13-a287ef35d4d9">
<img width="288" alt="Screenshot 2024-08-16 at 09 28 47"
src="https://github.com/user-attachments/assets/170a79b1-ec9c-45f9-82f5-ba7fa4029334">
<img width="274" alt="Screenshot 2024-08-16 at 09 45 16"
src="https://github.com/user-attachments/assets/e3fd9b59-b41f-427d-8c07-5acdf1dc5ecf">
<img width="292" alt="Screenshot 2024-08-16 at 09 45 36"
src="https://github.com/user-attachments/assets/c4f708aa-3f0d-4ff3-b779-0d4ed5f6ba73">
<img width="261" alt="Screenshot 2024-08-16 at 09 45 58"
src="https://github.com/user-attachments/assets/eba1e26f-04ca-4178-87c8-3a79daff3a9a">

---------

Co-authored-by: dpeke <dpekelis@funstage.com>

crates/bevy_ui/src/layout/convert.rs

@@ -66,7 +66,7 @@ impl UiRect {
 pub fn from_style(
  context: &LayoutContext,
  style: &Style,
- ignore_padding_and_border: bool,
+ ignore_border: bool,
 ) -> taffy::style::Style {
  taffy::style::Style {
  display: style.display.into(),
@@ -93,18 +93,12 @@ pub fn from_style(
  margin: style
  .margin
  .map_to_taffy_rect(|m| m.into_length_percentage_auto(context)),
- // Ignore padding for leaf nodes as it isn't implemented in the rendering engine.
- // TODO: Implement rendering of padding for leaf nodes
- padding: if ignore_padding_and_border {
- taffy::Rect::zero()
- } else {
- style
- .padding
- .map_to_taffy_rect(|m| m.into_length_percentage(context))
- },
+ padding: style
+ .padding
+ .map_to_taffy_rect(|m| m.into_length_percentage(context)),
  // Ignore border for leaf nodes as it isn't implemented in the rendering engine.
  // TODO: Implement rendering of border for leaf nodes
- border: if ignore_padding_and_border {
+ border: if ignore_border {
  taffy::Rect::zero()
  } else {
  style

crates/bevy_ui/src/layout/mod.rs

@@ -264,10 +264,16 @@ pub fn ui_layout_system(
  let Ok(layout) = ui_surface.get_layout(entity) else {
  return;
  };
- let layout_size =
- inverse_target_scale_factor * Vec2::new(layout.size.width, layout.size.height);
- let layout_location =
- inverse_target_scale_factor * Vec2::new(layout.location.x, layout.location.y);
+ let layout_size = inverse_target_scale_factor
+ * Vec2::new(
+ layout.size.width - layout.padding.left - layout.padding.right,
+ layout.size.height - layout.padding.top - layout.padding.bottom,
+ );
+ let layout_location = inverse_target_scale_factor
+ * Vec2::new(
+ layout.location.x + layout.padding.left,
+ layout.location.y + layout.padding.top,
+ );
 
  absolute_location += layout_location;