feat: add docking box model and layout videos in styles bar doc

Author: devvaannsh

docs/02-Live Preview/03-styles-bar.md

@@ -20,6 +20,10 @@ When you select an element in [Edit Mode](./live-preview-edit), a bar appears at
 
 You can move the bar to the top of the Live Preview using the **dock button** at the right end of the bar.
 
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/docking.mp4"
+/>
+
 ## Save Changes To
 
 Phoenix Code gives you control to choose where you want to save your edits. By default, all the changes are saved directly on the element as an inline style. If you want to save the changes in one of the CSS rules, you can click on the **Save changes to** button:
@@ -163,6 +167,10 @@ The button in the center of the frame controls how the sides are linked:
 
 Linked fields are color coded so you can see which sides move together.
 
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/box-model.mp4"
+/>
+
 ## Layout
 
 The popover has two tabs, **Display** and **Position**.
@@ -179,6 +187,10 @@ The **Position** tab:
 
 To learn more about these properties, see MDN's guides on [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) and [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
 
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/styles-bar/layout.mp4"
+/>
+
 ## When a Change Is Overridden
 
 Sometimes a more specific CSS rule wins over the rule you are editing, so your change has no visible effect. In that case, Phoenix Code automatically adds `!important` to your change to make it take effect.