NotebookLM again. I had to generate it a second time, because if you ask the chat to make the audio overview, it feeds it a 2 liner description and the episode wanders off course.

PROMPT:


## 013: Not Stack Panels - Overlays, Canvas & Absolute Positioning
013: UI Rosetta Stone 03: 
• Overlays, Layers, and Z-Order
• Canvas and Absolute Positioning (and why to avoid "Coordinate Soup")
• Decorator-Style Wrappers

# Summary
This is special Episode 003 of the mini-series “UI Rosetta Stone” (Overall EP013).
Focus: Non-stacking layout primitives: overlays/layers, canvas/absolute positioning, and decorator-style wrapping (brief).
Audience: Senior UI engineers, 2D art and design specialists working in editors.

## Must cover:
This is the key information to be presented this episode, and MUST be covered!
- **UMG Overlay:** The layering mental model, z-order, and typical uses (tooltips, highlights, modal layers). Mention that while Overlays stack elements, they also increment Layer IDs (draw calls), so they should be used intentionally [1].
- **WPF Canvas & UMG CanvasPanel:** Absolute coordinates (e.g., `Canvas.Left` and `Canvas.Top` in WPF) [2, 3]. Contrast when it’s useful (drawing, painting, or root HUDs) vs. when it becomes tech debt [4, 5].
- **Absolute Positioning on the Web:** `position: absolute/relative/fixed/sticky` (conceptual), and managing `z-index` layering based on containing blocks [6, 7].
- **XAML Decorators (brief):** The concept of the `Decorator` base class (which only accepts a single `Child` element) to add a behavior or visual layer (like `Border` or `Viewbox`) [8, 9]. Map this to UMG wrappers (like `SizeBox`, `ScaleBox`, or `RetainerBox`) and Web `div` wrappers [10, 11].
- **Coordinate Systems:** UMG anchors/pivots conceptually (using 0.0 to 1.0 normalized coordinates) [12, 13], WPF alignment origins, and web layout boxes/containing blocks.
- **Best Practices vs Traps:** 
- *“Canvas everywhere” anti-pattern:* Specifically call out that in Unreal, excessive Canvas Panels ruin performance by incrementing child Layer IDs and exploding draw calls [14, 15].
- *Layering & hit-testing pitfalls:* Contrast WPF's invisible hit-testing (where a `null` background lets clicks pass through, but a `Transparent` background captures them) [16, 17] with UMG's visibility settings (`Hit Test Invisible` vs `Self Hit Test Invisible`) [18]. Mention Web's `pointer-events: none`.
- *Debugging layouts:* High-level tools and approaches per stack (e.g., WPF Snoop/Visual Studio live tree, Unreal Widget Reflector [19], Chrome DevTools).

## Topics already covered:
This is information already covered in previous episodes or coming up in future episodes, and you cannot cover it again. For reference, I have provided the episodes where it was spoken of, and you may ask listeners to go back.
- 00: WPF Runtime and dispatcher
- 00: Unreal runtime and what slate is
- 00: Web runtime and browser DOM + Javascript engine + Node Server
- 00: Dev environments, Visual studio vs unreal vs visual studio code
- 00: Source control, Git, perforce etc…
- 01: Definition of a control, user control, component etc…
- 01: Button element\control and Textbox\label controls
- 01: MVVM and importance of separation of concerns
- 02: Layout controls that are not "panels" including overlay, canvas
- 012: One-Dimensional vs Two-Dimensional Layouts (StackPanels, Flexbox, Grids)
- 012: Fluid Design and Responsive Spaces
- 012: Pixel Density, DPI Scaling, and Screen Adaptation

## Output format:
Generate the podcast script using the following exact structure:
1) Title
2) Episode description (podcast listing)
3) Segment outline + timestamps
4) Script (no code)
5) “When to use it / when not to” table for Overlay vs Canvas/Absolute
6) Checklist: diagnosing a broken layout (per stack)

Rules:
- Keep it pragmatic: focus on decision-making and maintainability.
- Keep it controls-level, not engine internals.
- Give concrete mental models, not buzzwords.


This episode includes AI-generated content.