Hot spot element size too huge with small width

[pjotrsavitski]

If the width of the container is small enough, then initial value of 24 might be too large for the screen and it is only getting worse with increasing page size.

The main issue seems to be between those two:
https://github.com/h5p/h5p-image-hotspots/blob/master/scripts/image-hotspots.js#L238
https://github.com/h5p/h5p-image-hotspots/blob/master/scripts/image-hotspots.js#L242

Initial font size of 24 for containers with small width might be too big. It would get worse if some JS code is changing the width of the embedded IFRAME with value of self.initialWidth becoming smaller than the current width, thus ever increasing the font size.

This is a really bad solution that seems to mitigate the issue enough to make materials usable, though it could have some unexpected consequences and the logic of calculating the font size should be changed.

    if (self.initialWidth === undefined) {
      self.initialWidth = self.$container.width();
      if (width < 800) {
          self.initialWidth = 800;
      }
    }

Example: https://vara.e-koolikott.ee/h5p/embed/1888

Start by opening it in a browser window with really small width (350 should be good enough), then resize it to around 700 and all the hotspot elements would be covering each other. It is also possible to click the fullscreen button and see the effect without changing the size of the initially small window.

The issue is mostly about initial font size being too large for the small screen with densely placed hot spots.

[davewallace]

I'm also really struggling with this, page responsivity really poorly affects the UX for this component, particularly when a graphic has wording or a specific graphic on it. The hotspots, whether using the default or uploading your own image for the hotspot, obscure text/graphics as the page width changes - users can't see important information in the graphic before they decide to click a hotspot.