The layout problem

[lateef-k]

Below is the code responsible for figuring out the layout for the canvases. We first see how many canvases we need by looking at seqVizPairs.length and then we calculate the size of each canvas so as to distribute them as equally as possible.

https://github.com/katestange/Numberscope/blob/1eeafb6f7bda937036e0a76b250515779f78485d/website/javascript/NScore.js#L141-L146

The div where the canvas will be placed is then created in the NScore.generateP5 method,

https://github.com/katestange/Numberscope/blob/1eeafb6f7bda937036e0a76b250515779f78485d/website/javascript/NScore.js#L34-L39

and then we call the create the canvas itself in the following line

https://github.com/katestange/Numberscope/blob/1eeafb6f7bda937036e0a76b250515779f78485d/website/javascript/NScore.js#L45

the divs are styled in these lines in the toolPage.css file

https://github.com/katestange/Numberscope/blob/1eeafb6f7bda937036e0a76b250515779f78485d/website/css/toolPage.css#L67-L80

There are a few problems:

• Using the browser while not maximized leads to weird behavior.
• Everything looks so much bigger on chrome
• Canvases overflow slightly on bottom side and the right side.

I almost certain this is a CSS issue, which I'm terrible at.

[lateef-k]

this (68b86d8) commit didn't actually fix the chrome layout issue, I was just zoomed out....
the chrome layout still looks kinda super zoomed in.