Grid Layout and TextWrapping not playing nice with each other

Bug Reports
1

I have a simple layout with card like elements and the text inside the cards gets out of bounds, as can be seen here: https://dl.dropboxusercontent.com/s/tieh9zm2doqj3yl/shot_171204_184048.png

Fuse version: 1.4.0 (build 14778)

OS: Windows 10

Code to reproduce it

<App Background="#DDD" >
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var items = Observable();
		module.exports = {
			items: [
				{ "desc": "aaaaa aaaaaaa" },
				{ "desc": "bbbbbb" },
				{ "desc": "ccc ccc cccccccc cccccccccc cccc" },
				{ "desc": "dddddddddd" }
			]
		}
	</JavaScript>
	<Grid ColumnCount="3" CellSpacing="10" Margin="10" Alignment="Top"  >
		<Each Items="{items}" Limit="4" >
			<StackPanel Padding="5" Color="#FFF" Alignment="Top"  >
				<Text Value="{desc}" Background="#faa" TextWrapping="Wrap" Opacity="0.8" />
			</StackPanel> 
		</Each>
	</Grid>
</App>

Setting Limit="3" on Each fixes the card’s layout

2

Thank you for an excellent bug report and reproduction!

I’ve now logged a ticket about it, please follow the status there.