Popup with grid + map doesn't layout properly

[kevflynn]

When creating a popup and adding a grid to the popup, I want to create 3 column grid that pops up from the bottom of the trigger button. The odd thing is - whenever I use .map to take an array and create an element for each row (i.e. Grid.Row), the Grid properties are off and so is the layout. Very easy to reproduce. Just make sure you use .map to layout the rows of the Grid.

What happens: Popup content is huge and off the screen. Doesn't matter if I use flowing, wide or normal layout (it's ignored as is the Popup position). It seems to use override with center positioning and makes the grid row content super wide, which makes much of the content off of the screen.

Expected: The same behavior as if I manually create multiple Grid.Row elements where the Grid properties are adhered to.

<Popup trigger={<Button>Show flowing popup</Button>} position="bottom left" flowing on="click" > <Grid centered divided columns={3}> {anyArray.map((df) => { return ( <Grid.Row> <Grid.Column textAlign='center'> <Header as='h4'>Basic Plan</Header> <p><b>2</b> projects, $10 a month</p> <Button>Choose</Button> </Grid.Column> <Grid.Column textAlign='center'> <Header as='h4'>Business Plan</Header> <p><b>5</b> projects, $20 a month</p> <Button>Choose</Button> </Grid.Column> <Grid.Column textAlign='center'> <Header as='h4'>Premium Plan</Header> <p><b>8</b> projects, $25 a month</p> <Button>Choose</Button> </Grid.Column> </Grid.Row> ); })} </Grid> </Popup>