In tandem with the changes I made to the "page layout" file,
I have added the ability to override aspects of the auto formatting code. These can be set in the props values and modify the way that the buttons are arranged.
By default based on a given container size, X number of buttons are arranged to fit into a grid of x columns by y rows. If this is not symmetrical then by default it creates more columns than rows.
This behaviour can now be switched around so there are more rows than columns.
While I was doing this I thought I might as well add the ability to specify a fixed number of rows or columns and just calculate the unspecified value. This simple change actually makes a big difference to how the screens look and allows more personalisation, than the original fixed layout routine.
Some examples of the same button screen but in different arrangements.
Some not overly practical, but then there is also container size, spacing and margins to play with 
