In the IDE

When you first open the br-o.jspx, the table component contains the defualt number of rows.

Once you select the tables (illustrated above) and set the Rows property in the table's Property Inspector to 2, the table will only display two rows at one time:

You specify the br-o.jspx view to take up the entire viewport of the mobile device by adding an HTML tag to the header portion of the page.  This is accomplished by right clicking on the header tag, select Insert HTML/JSP... menu item, and enter into text box the  text <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> as follows:

You also use the Property Inspector to limit the width of the columns of ed-o.jspx. In the Structure view, multi-select the input text fields within the tr:panelFormLayout to change the column width for all of them simultaneously.

In this illustration, the input fields for OrderId, CustomerID, ShiptoAddressId, and ShippingOptionId are all limited to five characters using the Multiple-Property Inspector.