Update components.md

docs/en/manuals/components.md

@@ -65,12 +65,16 @@ If you need to change the position, rotation or scale of a component at run-time
 
 The draw order of visual components depend on two things:
 
-: Render script predicates
+### Render script predicates
 Each component is assigned a [material](/manuals/material/) and each material has one or more tags. The render script will in turn define a number of predicates, each matching one or more material tags. The render script [predicates are drawn one by one](/manuals/render/#_render_predicates) in the *update()* function of the render script and the components matching the tags defined in each predicate will be drawn. The default render script will first draw sprites and tilemaps in one pass, then particle effects in another pass, both in world space. The render script will then proceed to draw GUI components in a separate pass in screen space.
 
-: Component z-value
+### Component z-value
 The components matching a predicate are drawn together, and the order in which they are drawn depends on the final z-value of the component. The final z-value of a component is the sum of the z-values of the component itself, the game object it belongs to and the z-value of any parent game objects.
 
+::: sidenote
+The order in which multiple GUI components are drawn is **not** determined by the z-value of the GUI components. GUI component draw order is controlled by the [gui.set_render_order()](/ref/gui/#gui.set_render_order:order) function.
+:::
+
 Example: Two game objects A and B. B is a child of A. B has a sprite component.
 
 | What     | Z-value |
@@ -81,14 +85,8 @@ Example: Two game objects A and B. B is a child of A. B has a sprite component.
 
 With the above hierarchy the final z-value of the sprite component on B is 2 + 1 + 0.5 = 2.5.
 
-::: sidenote
-The order in which multiple GUI components are drawn is **not** determined by the z-value of the GUI components. GUI component draw order is controlled by the [gui.set_render_order()](/ref/gui/#gui.set_render_order:order) function.
-:::
-
-::: sidenote
+::: important
 If two components have the exact same z-value the order is undefined and you may end up with components flickering back and forth or components being rendered in one order on one platform and in another order on another platform.
-:::
 
-::: sidenote
-The render script defines a near and far plane for z-values. Any component with a  z-value that falls outside of this range will not be rendered. The default range is -1 to 1 but [it can easily be changed](/manuals/render/#_default_view_projection).
+The render script defines a near and far plane for z-values. Any component with a z-value that falls outside of this range will not be rendered. The default range is -1 to 1 but [it can easily be changed](/manuals/render/#_default_view_projection).
 :::