[Renderer] Avatar box and text should be horizontally aligned but render vertically #26
Description
Summary
In the profile scene, the avatar box (AVT) and the adjacent text content ('John Doe', 'Software Engineer', etc.) should be horizontally aligned as shown in the ASCII wireframe, but they are rendering vertically with the text appearing below the avatar box instead of beside it.
Steps to Reproduce
- Create a wireframe with an avatar box and adjacent text content as shown in the profile scene
- Render the wireframe in the browser
- Observe the layout of the avatar box and text elements
Expected Behavior
The avatar box (AVT) should appear on the left side with the text content ('John Doe', 'Software Engineer', description) horizontally aligned to the right of the avatar box, as depicted in the ASCII wireframe.
Actual Behavior
The avatar box takes up the full width and the text content appears vertically below the avatar box instead of being horizontally aligned beside it.
Wireframe Content
@scene: profile
+-----------------------------------------------+
| |
| +---+ 'John Doe' |
| | | Software Engineer |
| |AVT| |
| | | "Passionate about creating |
| +---+ beautiful user experiences |
| and clean code" |
| |
| +----------+ +----------+ +----------+ |
| | 1.2K | | 456 | | 89 | |
| |Followers | |Following | | Posts | |
| +----------+ +----------+ +----------+ |
| |
| [ Follow ] [ Message ] |
| |
| [ View Profile ] |
| |
+-----------------------------------------------+
[Follow]:
variant: primary
@click -> goto(following, fade)
[Message]:
variant: outline
@click -> goto(chat, slide-left)
[View Profile]:
variant: ghost
---
@scene: following
+-----------------------------------------------+
| |
| +---+ 'John Doe' |
| | | Software Engineer |
| |AVT| |
| | | "Passionate about creating |
| +---+ beautiful user experiences |
| and clean code" |
| |
| +----------+ +----------+ +----------+ |
| | 1.2K | | 457 | | 89 | |
| |Followers | |Following | | Posts | |
| +----------+ +----------+ +----------+ |
| |
| [ Following ] [ Message ] |
| |
| [ View Profile ] |
| |
+-----------------------------------------------+
[Following]:
variant: secondary
@click -> goto(profile, fade)
[Message]:
variant: outline
@click -> goto(chat, slide-left)
[View Profile]:
variant: ghost
---
@scene: chat
+-----------------------------------------------+
| 'Chat with John Doe' [ Back ] |
| |
| +---------------------------------------+ |
| | | |
| | Hey! Thanks for following me! | |
| | [John] | |
| | | |
| | [You] | |
| | Nice to connect with you! | |
| | | |
| +---------------------------------------+ |
| |
| +---------------------------------------+ |
| | #message | |
| +---------------------------------------+ |
| |
| [ Send ] |
| |
+-----------------------------------------------+
[Back]:
variant: outline
@click -> goto(profile, slide-right)
#message:
placeholder: "Type a message..."
[Send]:
variant: primary
Affected Scenes
profile
Parse Information
Multiple misaligned closing border warnings and one parse error related to border alignment issues.
Parsed AST
{"scenes":[{"id":"profile","title":"profile","transition":"fade","device":"Desktop","elements":[{"TAG":"Spacer","position":{"row":2,"col":1}},{"TAG":"Text","content":"John Doe","emphasis":true,"position":{"row":3,"col":11},"align":"Left"},{"TAG":"Box","bounds":{"top":3,"left":9,"bottom":7,"right":13},"children":[{"TAG":"Spacer","position":{"row":4,"col":10}},{"TAG":"Text","content":"AVT","emphasis":false,"position":{"row":5,"col":10},"align":"Left"},{"TAG":"Spacer","position":{"row":6,"col":10}}]},{"TAG":"Text","content":"Software Engineer","emphasis":false,"position":{"row":4,"col":11},"align":"Left"},{"TAG":"Text","content":"\"Passionate about creating","emphasis":false,"position":{"row":6,"col":11},"align":"Left"},{"TAG":"Text","content":"beautiful user experiences","emphasis":false,"position":{"row":7,"col":12},"align":"Left"},{"TAG":"Text","content":"and clean code\"","emphasis":false,"position":{"row":8,"col":16},"align":"Left"},{"TAG":"Spacer","position":{"row":9,"col":1}},{"TAG":"Row","children":[{"TAG":"Box","bounds":{"top":10,"left":6,"bottom":13,"right":17},"children":[{"TAG":"Text","content":"1.2K","emphasis":false,"position":{"row":11,"col":10},"align":"Left"},{"TAG":"Text","content":"Followers","emphasis":false,"position":{"row":12,"col":7},"align":"Left"}]},{"TAG":"Box","bounds":{"top":10,"left":19,"bottom":13,"right":30},"children":[{"TAG":"Text","content":"456","emphasis":false,"position":{"row":11,"col":23},"align":"Left"},{"TAG":"Text","content":"Following","emphasis":false,"position":{"row":12,"col":20},"align":"Left"}]},{"TAG":"Box","bounds":{"top":10,"left":32,"bottom":13,"right":43},"children":[{"TAG":"Text","content":"89","emphasis":false,"position":{"row":11,"col":36},"align":"Left"},{"TAG":"Text","content":"Posts","emphasis":false,"position":{"row":12,"col":35},"align":"Left"}]}],"align":"Left"},{"TAG":"Spacer","position":{"row":14,"col":1}},{"TAG":"Row","children":[{"TAG":"Button","id":"follow","text":"Follow","position":{"row":15,"col":10},"align":"Left","actions":[{"TAG":"Goto","target":"following","transition":"fade"}]},{"TAG":"Button","id":"message","text":"Message","position":{"row":15,"col":24},"align":"Left","actions":[{"TAG":"Goto","target":"chat","transition":"slide-left"}]}],"align":"Center"},{"TAG":"Spacer","position":{"row":16,"col":1}},{"TAG":"Button","id":"view-profile","text":"View Profile","position":{"row":17,"col":13},"align":"Center","actions":[]},{"TAG":"Spacer","position":{"row":18,"col":1}}]},{"id":"following","title":"following","transition":"fade","device":"Desktop","elements":[{"TAG":"Spacer","position":{"row":2,"col":1}},{"TAG":"Box","bounds":{"top":3,"left":9,"bottom":7,"right":13},"children":[{"TAG":"Spacer","position":{"row":4,"col":10}},{"TAG":"Text","content":"AVT","emphasis":false,"position":{"row":5,"col":10},"align":"Left"},{"TAG":"Spacer","position":{"row":6,"col":10}}]},{"TAG":"Text","content":"Software Engineer","emphasis":false,"position":{"row":4,"col":11},"align":"Left"},{"TAG":"Text","content":"\"Passionate about creating","emphasis":false,"position":{"row":6,"col":11},"align":"Left"},{"TAG":"Text","content":"and clean code\"","emphasis":false,"position":{"row":8,"col":16},"align":"Left"},{"TAG":"Spacer","position":{"row":9,"col":1}},{"TAG":"Row","children":[{"TAG":"Box","bounds":{"top":10,"left":3,"bottom":13,"right":14},"children":[{"TAG":"Text","content":"1.2K","emphasis":false,"position":{"row":11,"col":7},"align":"Left"},{"TAG":"Text","content":"Followers","emphasis":false,"position":{"row":12,"col":4},"align":"Left"}]},{"TAG":"Box","bounds":{"top":10,"left":16,"bottom":13,"right":27},"children":[{"TAG":"Text","content":"457","emphasis":false,"position":{"row":11,"col":20},"align":"Left"},{"TAG":"Text","content":"Following","emphasis":false,"position":{"row":12,"col":17},"align":"Left"}]},{"TAG":"Box","bounds":{"top":10,"left":29,"bottom":13,"right":40},"children":[{"TAG":"Text","content":"89","emphasis":false,"position":{"row":11,"col":33},"align":"Left"},{"TAG":"Text","content":"Posts","emphasis":false,"position":{"row":12,"col":32},"align":"Left"}]}],"align":"Left"},{"TAG":"Spacer","position":{"row":14,"col":1}},{"TAG":"Spacer","position":{"row":16,"col":1}},{"TAG":"Spacer","position":{"row":18,"col":1}}]},{"id":"chat","title":"chat","transition":"fade","device":"Desktop","elements":[{"TAG":"Spacer","position":{"row":3,"col":1}},{"TAG":"Box","bounds":{"top":4,"left":3,"bottom":12,"right":43},"children":[{"TAG":"Spacer","position":{"row":5,"col":4}},{"TAG":"Spacer","position":{"row":8,"col":4}},{"TAG":"Spacer","position":{"row":11,"col":4}}]},{"TAG":"Spacer","position":{"row":13,"col":1}},{"TAG":"Box","bounds":{"top":14,"left":3,"bottom":16,"right":43},"children":[{"TAG":"Input","id":"message","placeholder":"Type a message...","position":{"row":15,"col":5}}]},{"TAG":"Spacer","position":{"row":17,"col":1}},{"TAG":"Spacer","position":{"row":19,"col":1}}]}]}Environment
Wyreframe version: 0.7.11
Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
Viewport: 1728x940