list visualiser: viewport not resizing in y-direction

[martin-henz]

The viewport resizes in x-direction: When you re-size the browser window, the up-down scrollbar moves to the right edge of the window. However, the viewport does not re-size in y-direction: The left-right scrollbar is fixed at a particular position, and even overlaps with the REPL if the viewport is not tall enough.

[lumos309]

The problem appears to originate from this stylesheet file:

.kineticjs-content {
  /** 
   * Fixes a bug where the 1000x1000 canvas does not overflow
   * when it's container is too small.
   */
  width: 100% !important;
  height: 40vh !important; // 100% results in 0 height, 100vh is too big.
  overflow: auto;
}

Specifically, the "hard limit" of height: 40vh stops the visualiser panel from expanding beyond a certain height, even if the window is expanded.

Testing locally in Chrome and Edge, it seems that

1. simply commenting out the entire block of code, or
2. changing overflow to scroll

fixes the issue, and produced no problems with the overflow behaviour. Perhaps some native browser behaviour has changed since this fix was implemented?

[martin-henz]

@remo5000 @ningyuansg : @lumos309 took a look at this and cannot reproduce the problem that you fixed with the snippet above. Do you remember details? Was this browser-specific?

[ning-y]

38d0bff

Is the commit adding that style. @remo5000 says that he will look into it.

[remo5000]

IIRC, when I ported it over the canvas was fixed in size. I think I limited it so as to prevent weird overflowing issues. The best solution would be a resizing canvas (that works beyond the 1000x1000 limit). In addition, we would need to ensure that the visualised list is navigable. I'm all for removing it if the functionality is unaffected, but I can't reproduce any of the stuff right now due to having just wiped my computer @lumos309 @martin-henz

[lumos309]

Update:

changing overflow to scroll

as I mentioned above introduces an additional set of scroll bars within the visualiser panel- so essentially there are two levels of overflow handling, one within kineticjs-content and one within side-content-text (or one of its subclasses). Therefore as we only need one of the two, it seems safe to remove the entire block of kineticjs-content styling, or alternatively change overflow to none.

[ning-y]

@lumos309 Please go ahead with your recommended changes, if you’d like. @remo5000 and I have been away from this project for quite some time, so regrettably this is as much information as we can provide you.

[martin-henz]

Done by #460