VH units fix only works for inline styles, not for VH units used in CSS files

Overview

In in useSyncIframeHeightToContent.ts

// Apply a max-height to elements with vh units in their height - otherwise an infinite loop can occur where a component's
          // height is based on the height of the iFrame and the iFrame's height is based on that component leading
          // to an ever-increasing iFrame height!
          const elements: NodeListOf<HTMLElement> =
            iframeHTML.querySelectorAll('*');
          elements.forEach((element: HTMLElement) => {
            if (element.style.height.endsWith('vh')) {
              const vhValue = parseFloat(element.style.height);
              const newHeight = (vhValue / 100) * height;
              element.style.maxHeight = newHeight + 'px';
              resizeIframe();
            }
          });

This is very useful as it allows the use of vh units to style components without screwing up the iframe styling. However, this only works for inline styles, so this will need to work for stylesheet-applied vh-heights as well (likely the more common scenario).

Proposed resolution

User interface changes