Improve the 'Val` doc comments (#8134)

# Objective

Add comments explaining:
* That `Val::Px` is a value in logical pixels
* That `Val::Percent` is based on the length of its parent along a
specific axis.
* How the layout algorithm determines which axis the percentage should
be based on.

crates/bevy_ui/src/ui_node.rs

@@ -57,15 +57,29 @@ impl Default for Node {
     }
 }
 
-/// An enum that describes possible types of value in flexbox layout options
+/// Represents the possible value types for layout properties.
+///
+/// This enum allows specifying values for various [`Style`] properties in different units,
+/// such as logical pixels, percentages, or automatically determined values.
 #[derive(Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect)]
 #[reflect(PartialEq, Serialize, Deserialize)]
 pub enum Val {
-    /// Automatically determine this value
+    /// Automatically determine the value based on the context and other `Style` properties.
     Auto,
-    /// Set this value in pixels
+    /// Set this value in logical pixels.
     Px(f32),
-    /// Set this value in percent
+    /// Set the value as a percentage of its parent node's length along a specific axis.
+    ///
+    /// If the UI node has no parent, the percentage is calculated based on the window's length
+    /// along the corresponding axis.
+    ///
+    /// The chosen axis depends on the `Style` field set:
+    /// * For `flex_basis`, the percentage is relative to the main-axis length determined by the `flex_direction`.
+    /// * For `gap`, `min_size`, `size`, and `max_size`:
+    ///   - `width` is relative to the parent's width.
+    ///   - `height` is relative to the parent's height.
+    /// * For `margin`, `padding`, and `border` values: the percentage is relative to the parent node's width.
+    /// * For positions, `left` and `right` are relative to the parent's width, while `bottom` and `top` are relative to the parent's height.
     Percent(f32),
 }