diff --git a/docs/DESKTOP-DESIGNER.md b/docs/DESKTOP-DESIGNER.md index a688453..24fbf37 100644 --- a/docs/DESKTOP-DESIGNER.md +++ b/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 diff --git a/src/main/assets/apps/music/music_content.rml b/src/main/assets/apps/music/music_content.rml index 052707a..b60207b 100644 --- a/src/main/assets/apps/music/music_content.rml +++ b/src/main/assets/apps/music/music_content.rml @@ -1,174 +1,108 @@ -