Address review comments

Author: pinkeshmars

docs/debugging/imgs/overflow-error.avif

@@ -1,51 +1,41 @@
 ---
-slug: /debugging
-title: Debugging
-description: Practical guidance for debugging project code with Dreamflow agent.
+slug: /layout-errors
+title: Layout Errors
+description: Practical guidance for debugging layour errors in Dreamflow project.
 tags: [debugging]
 sidebar_position: 1
-keywords: [dreamflow debugging, error tracing, agent prompt, generated code, logging]
+keywords: [dreamflow debugging, layout error, agent prompt]
 ---
 
-# Debugging
+# Layout Errors
 
-## Layout Issues
+## Renderflex Overflow Errors
 
-### Overflow Errors
-
-An **Overflow Error** occurs when a widget’s content is too large to fit within the available space on the screen or inside its parent widget.
+A **Renderflex Overflow Error** occurs when a widget’s content is too large to fit within the available space on the screen or inside its parent widget.
 
 Flutter tries to render all UI elements within fixed layout constraints, and when a widget exceeds those limits, it triggers an overflow, often shown as yellow and black striped bars on the screen and the error message like this in the debug console:
 
-```
-A RenderFlex overflowed by 28 pixels on the bottom.
-```
-
-#### Why Overflow Errors Occur
+![overflow-error](imgs/overflow-error.avif)
 
 Overflow errors typically happen due to one or more of the following reasons:
 
 - A widget’s **content is larger** than the space provided by its parent (for example, long text inside a `Row` or a large image in a small `Container`).
+- A `Column` with too many child widgets that extend beyond the screen height.
 - Missing **scrollable widgets** like `SingleChildScrollView`, `ListView`, or `Expanded` when content should be scrollable or flexible.
 - Hard-coded **widths or heights** that don’t adapt to different screen sizes.
 - Nesting layout widgets (like `Row`, `Column`, or `Flex`) without proper constraints (`Expanded`, `Flexible`, etc.).
 
-#### Common Examples
-
-- A `Row` containing multiple `Text` widgets with long strings and no wrapping.
-- A `Column` with too many child widgets that extend beyond the screen height.
-- Fixed-size containers that don’t resize on smaller devices.
-
-#### How to Fix Overflow Errors
+### Fixing Renderflex Overflow Errors
 
+#### Fix Manually
 Here are some quick tips to fix overflow errors manually:
 
 - Use **`Expanded`** or **`Flexible`** widgets to make child widgets adapt to available space.
 - Wrap overflowing content in a **`SingleChildScrollView`** to make it scrollable.
 - Use **`TextOverflow.ellipsis`** or `maxLines` for long text content.
 - Avoid fixed widths/heights; use responsive layout helpers like `MediaQuery` or `LayoutBuilder`.
 
-#### Using Agent to Fix Overflow Errors
+#### Fix with Agent
 
 Dreamflow’s Agent can help you quickly identify and fix overflow errors.
 

docs/debugging/debugging.md docs/debugging/layout-errors.mddocs/debugging/debugging.md renamed to docs/debugging/layout-errors.md

@@ -52,7 +52,17 @@ const sidebars: SidebarsConfig = {
                 }
             ],
         },
-        'debugging/debugging',
+        {
+            type: 'category',
+            label: 'Debugging',
+            collapsed: false,
+            items: [
+                {
+                    type: 'autogenerated',
+                    dirName: 'debugging',
+                }
+            ],
+        },
     ]
 
 };