Warnings positioned incorrectly when input is contained in a CSS grid about hyperform HOT 3 CLOSED

hyperform(window);
/*
Workaround for <https://github.com/hyperform/hyperform/issues/127>.

Hyperform just sets its warnings as position: absolute without
setting coordinates for them. Normally, that just puts it
'wherever it would be' - i.e. right below the input - but when
the input is a grid item, the warning ends up defaulting to the
upper-left-corner of the grid.

With this renderer hook installed, warnings for grid-based inputs
will instead end up inside wrapper elements which are assigned to
the same grid areas as the corresponding inputs. The warnings are
positioned so that their top edges sit at the bottom of the grid
cells, thus placing them below the inputs.

Limitations:
- This code assumes you're positioning the inputs with grid-area,
  not numeric row/column or auto-layout. Can probably be adapted.
- If the input is smaller than the grid cell, the warning may
  appear too far away from it. Not sure what to do about that.
- It relies on classList. That should be supported in just about
  anything that supports grid, but if not, it can be changed to
  just use className.
*/
const hfWarningGridWrapperClass = 'hfWarningGridWrapper';
const hfGridAreaProperty = '--hf-grid-area';
hyperform.setRenderer('attachWarning', (warning, input) => {
	/*
	getComputedStyle's behavior for shorthand properties like grid-area is
	apparently somewhat inconsistent, so I'm using a custom property instead.
	It should be set to the same thing as grid-area on each input.
	*/
	const gridArea = getComputedStyle(input).getPropertyValue(hfGridAreaProperty);
	if(gridArea) {
		/** @type {HTMLElement} */
		let wrapper = input.nextElementSibling;
		if(wrapper) {
			if(!wrapper.classList.contains(hfWarningGridWrapperClass)) {
				wrapper = undefined;
			}
		}
		if(!wrapper) {
			wrapper = document.createElement('div');
			wrapper.className = hfWarningGridWrapperClass;
			wrapper.role = 'presentation';
			wrapper.style.gridArea = gridArea;
			input.parentNode.insertBefore(wrapper, input.nextSibling);
		}
		wrapper.insertBefore(warning, null);
	} else {
		// Not in a grid, so just insert it in the default location
		input.parentNode.insertBefore(warning, input.nextSibling);
	}
});