Make NextUp window the same size as seats

[ddfridley]

We want to alphabetize the candidates. That means that the first person would always start out in the larger next up window which might bias things. So we want to shrink that window.

If you go to undebate.herokuapp.com/schoolboard-conversation on a desktop, you'll see that you can change the size of the window, and the display will re-arrange based on the new dimensions. Our objective is to always have everything on the screen - no scrolling. So the positions for thing are calculated based on the screen size.

This change needs to be done in the 3 different layouts that are chosen based on resolution, and in the initial state that is rendered server side before the screen size is known.

The file is app/components/web-components/undebate.jsx

in constructor() near the end, state={....seatStyle: { ...., nextUp: { left: xxx, top: xxx, width xxx}
then introSeatStyle: {left: xxx this needs to position it off the screen

then in calculatePositionAndStyle()
there are 3 cases where these variables need to be set: width/height > 0.8, width/height>1.8 and portrait mode.

nextUpWidthRatio,
seatStyle.nextUp.left
seatStyle.nextUp.top
seatStyle.nextUp.width
introSeatStyle.nextUp

changing the width is easy, but changing the left and top, and possible having to move other windows around to make it look good will be the work.

[ddfridley]

See #30 it would be wise to make both changes at the sametime because they impact calculatePositionAndStyle