fix Music app layout and document RmlUi encoding issue

- Fixed Music app layout using incremental edit approach
- Documented RmlUi file encoding issue in DESKTOP-DESIGNER.md
- Added workaround: copy from working file and edit incrementally

docs/DESKTOP-DESIGNER.md

@@ -219,3 +219,49 @@ The JSON contains element bounds, classes, IDs, and visibility - useful for auto
 ## Action Recording and Playback
 
 See [TESTING-FRAMEWORK.md](TESTING-FRAMEWORK.md) for details on recording and playing back UI interactions.
+
+---
+
+## Known Issues and Workarounds
+
+### RmlUi Layout Breaking Due to File Encoding
+
+**Problem**: Content fragments created with certain file-writing methods may render with broken layouts - elements appear with 0 width, text wraps excessively, and flex layouts collapse.
+
+**Symptoms**:
+- List items don't expand to full width
+- Text wraps to very narrow columns
+- Avatars/icons overlap with text
+- UI hierarchy shows `"width": 0.0` for elements that should have proper width
+
+**Root Cause**: RmlUi's parser is sensitive to certain invisible file formatting. While files may appear identical in text editors and have the same line endings (CRLF), subtle encoding differences can break layout parsing.
+
+**Diagnosis**: Use `--hierarchy FILE` flag to dump UI element dimensions:
+```bash
+./designer/build/Release/mosis-designer.exe --simulator --playback tests/test_app.json --hierarchy hierarchy.json
+```
+
+Check the JSON for elements with `"width": 0.0` that should have proper dimensions.
+
+**Workaround**: Instead of creating content fragments from scratch, copy an existing working file and modify it:
+
+```bash
+# 1. Copy a known working file (e.g., messages_content.rml)
+cp src/main/assets/apps/messages/messages_content.rml src/main/assets/apps/myapp/myapp_content.rml
+
+# 2. Edit the file incrementally (use sed, text editor, or Edit tool)
+# DO NOT rewrite the entire file - preserve the original byte structure
+
+# 3. Test the layout
+./designer/build/Release/mosis-designer.exe --simulator --playback tests/test_myapp.json --screenshot-after test.png
+```
+
+**Working Reference Files**:
+- `apps/messages/messages_content.rml` - Known good file format
+- `apps/store/store_content.rml` - Created by copying from messages
+- `apps/settings/settings_content.rml` - Created by copying from messages
+
+**Prevention**: When creating new content fragments:
+1. Always start by copying an existing working content fragment
+2. Make incremental edits rather than full file rewrites
+3. Test layout after changes using `--hierarchy` flag