Radar plot covering up the quadrant table for taller monitors

[jemerald]

The current responsive design seems to only cater for monitors that's around 16:9 aspect ratio.

On a 4:3 ~ 3:2 aspect ratio screen, the radar plot will start covering up the quadrant table when the blip title is long.

The following screenshot is taken on a screen with resolution of 1440x1080 and with the ThoughtWorks Technology Radar Vol. 21 data

Also, with the popularization of the ultra-wide monitors (around 21:9 aspect ratio), developers often split the screen in to 2 halves, which results in effective browser window aspect ratio close to 1:1.

The following screenshot is taken on a screen with resolution of 3840x1600, where the browser occupies the left-half (window.innerHeight=1479, window.innerWidth=1918)

This renders the quadrant table unusable as the plot has higher z-index than the table so user could not select the blips (even at the top area where the plot is transparent.

Please consider supporting users with taller browser size.

Solution options - either or both of:

1. take window.innerWidth into consideration when calculating radar plot size, e.g.

   -  var size = window.innerHeight - 133 < 620 ? 620 : window.innerHeight - 133
   -
   -  new GraphingRadar(size, radar).init().plot()
   +  const MINIMUM_RADAR_SIZE = 620
   +  const SCROLLBAR_WIDTH = 20
   +  const PAGE_WIDTH_RATIO = 0.8
   +  const RADAR_PLOT_WIDTH_RATIO = 0.6
   +  const sizeByHeight = Math.max(window.innerHeight - 133, MINIMUM_RADAR_SIZE)
   +  const sizeByWidth = Math.max(
   +    (window.innerWidth - SCROLLBAR_WIDTH) * PAGE_WIDTH_RATIO * RADAR_PLOT_WIDTH_RATIO,
   +    MINIMUM_RADAR_SIZE,
   +  )
   +
   +  new GraphingRadar(Math.min(sizeByHeight, sizeByWidth), radar).init().plot()
   

2. reduce max-width for the div.quadrant-table.selected