Consider fixing .cropper-crop-box vertical offset when using IEF complex widget with the modal option

My use case is the usage of ImageWidgetCrop, along with the Inline Entity Form complex widget and its modal window option, that lets my client edit images in a dialog window, so as to have enough space to perform multiple crops on the same image. The UI of the vertical tabs of the cropping widget reduces the leftover lateral space available to the point where the precise cropping of an image becomes challenging, hence the necessity to use the modal option on the IEF widget.

The issue is NOT replicated when the Inline Entity Form complex widget is used WITHOUT the modal option.

Declaring the issue here, as opposed to the IEF issue queue seems more natural, as it seems to be IWC's role to detect this use case and push a CSS rule to override IEF CSS, for this specific IEF widget configuration case. Using a longer heritage chain to override seems to do the job in my custom module CSS for now. See SCSS rules below.

I can replicate the issue with the Claro or the Gin admin themes. Have a look at attached screenshots, they bring the issue into light with more eloquence than words.

Screenshots

• IEF+IWcrop-modal-crop-overlay-CSS-override-custom-module.png
• IEF+IWcrop-modal-crop-overlay-CSS-precedence.png
• IEF+IWcrop-modal-crop-overlay-fixed.png
• IEF+IWcrop-modal-crop-overlay-IEF-widget-settings.png

Component versions

• Drupal version : 10.4.8
• IEF version: 3.0.0
• Gin theme version: 4.0.6
• Claro theme version: 10.4.8
• Cropper library version: 2.0.0-RC.2
• ImageWidgetCrop: 3.0.0

Override SCCS code in my custom module below that fixes the issue for me util it is resolved within IWC :

/**
 * Fix the IEF popup + cropper JS bug with the modal IEF popup option
 * Issue with the crop overlay (.cropper-crop-box) appearing below the image preview
 * It is a relative VS absolute issue with the IEF css overriding the
 * Cropper css rule
 */

// @see ief_popup.css ~ l.17
.ief-popup-wrapper div,
.ief-popup-wrapper fieldset {

  // @see cropper.min.css ~ l.9
  .cropper-canvas,
  .cropper-crop-box,
  .cropper-drag-box,
  .cropper-modal,
  .cropper-wrap-box {
    position: absolute;
  }
}